curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e8adcc27e235a154231.md
Type selectors, also known as element selectors, target elements based on their tag name.
These selectors are fundamental in CSS and allow you to apply styles to all instances of a specific HTML element.
Type selectors are straightforward to use and are written simply as the tag name of the element you want to style.
Here is an example of a type selector targeting all paragraph elements on the page:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
p {
color: blue;
}
:::
In this example, all p elements will have their text color set to blue.
Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1).
This means that type selectors will be overridden by class selectors, ID selectors, and inline styles, but can still apply styles unless those higher-specificity rules are present.
Let's take a look at an example where the class selectors will override the styles of the type selector.
Here is an example with two paragraph elements:
:::interactive_editor
<p class="para">I am a paragraph</p>
<p class="para">Here is another paragraph</p>
:::
Both paragraph elements have a class called para.
Inside the CSS file, the type selector targets paragraphs, and the class selector targets elements with the para class.
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p class="para">I am a paragraph</p>
<p class="para">Here is another paragraph</p>
p {
color: blue;
}
.para {
color: red;
}
:::
All paragraphs on the page with the class of para will have the text color set to red instead of blue because class selectors have a higher specificity than type selectors.
What is the specificity value of a type selector (e.g., div)?
(1, 0, 0, 0)
This selector targets elements based on their tag name.
(0, 1, 0, 0)
This selector targets elements based on their tag name.
(0, 0, 1, 0)
This selector targets elements based on their tag name.
(0, 0, 0, 1)
4
Which of the following has a lower specificity than a type selector?
A class selector.
This selector targets all elements and has the lowest specificity.
An ID selector.
This selector targets all elements and has the lowest specificity.
An Inline style.
This selector targets all elements and has the lowest specificity.
A Universal selector.
4
Given the following CSS, what will be the color of the text?
<head>
<style>
* {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<p>This text</p>
</body>
blue
Consider the specificity of the selectors.
red
green
Consider the specificity of the selectors.
purple
Consider the specificity of the selectors.
2