As already mentioned in previous guides, CSS stands for Cascading Style Sheet which, translated, stands for cascading style sheet.
This concept must be particularly clear to you, as it is preparatory to learn what we will talk about in this guide.
The main feature of a style sheet is the order in which selectors assign CSS rules to a given HTML element.
This means that if two identical properties are assigned to an element - by two selectors with the same "power" - but with different values, the last entered value will be interpreted.
Let's take an example to make it clearer:
p {
color : green;
}
p {
color : red;
}
As you can see, in this case, in our CSS sheet we will have two selectors that select all the <p> tags of the HTML page. What will happen? Simple: all p tags will be colored red, as the second rule will override the first.
The same thing would happen if the two properties were assigned in the same rule:
p {
color : green;
color : red;
}
Beyond this basic rule, however, there is something else that establishes the precedence of one rule over another in our style sheet: we are talking about the specificity of selectors , which we will analyze shortly, introducing another small concept useful for the purpose, namely that of inheritance .
Inheritance
Another important feature of CSS is property inheritance .
Let's try to conceive our html page as a sort of family tree: each element, therefore, has a parent from which it can inherit a specific property.
Let's take a small example.
The html structure:
<header>
<h1>Diventa sviluppatore web</h1>
<h2>CORSO DI CODING</h2>
<a href=”https://aulab.it/calendly">Prenota un appuntamento</a>
</header>
the CSS code:
header {
color : #333333;
font-size : 24px;
}
In the example above the <h1>, <h2> and <a> tags will have a size of 24px, while only the <h1> and <h2> tags will change their color.
This is because these tags will inherit the color and size from their parent .
Why, then, doesn't the anchor tag change color?
Because the anchor tag, as well as other tags inside the browser (such as <button> or <input>), has a default style that will never be overridden by an inherited one.
To override its style we will need to assign it one with rules expressed through a selector that will have a stronger action than inheritance: a more specific selector.
Specificity
What, then, is the much vaunted specificity?
Specificity is the value that allows you to define the priority of one CSS rule over another .
In the examples seen so far, it is easy to calculate the text size or determine the color of a paragraph, because we have deliberately reported very simple examples for the purpose of a better understanding of the basic concept.
In reality, however, the situation starts to look quite different when stylesheets start to get quite large, and determining the specificity of CSS rules can get very complicated.
For example, we might find ourselves in a situation where rules overlap and we can't change some properties. To overcome this problem, the CSS language provides a very simple way to determine which property will have priority.
The property with the highest specificity value will take precedence over the other properties; if two or more rules have the same specificity value, the assignment will follow the cascade principle.
The specificity value of a CSS rule can be represented by a four-digit number. In this number system, the importance of numbers is ordered from left to right, so higher values indicate greater specificity.
For each type of selector we will have a different specificity value.
Let's imagine our 4 digits:
|0|0|0|0|
- Elements and pseudo-elements will add 1 to the digit 4 -> |0|0|0|1|
- Classes, attributes and pseudo-classes will add 1 to the digit 3 -> |0|0|1|0|
- IDs will add 1 to digit 2 -> |0|1|0|0|
- The inline style will add 1 to the digit 1 -> |1|0|0|0|
Let's see some examples
p {} /* 0|0|0|1 */
p span {} /* 0|0|0|2 */
p.text-red {} /* 0|0|1|1 */
p.text-red#subtitle {} /* 0|1|1|1 */
#menu {} /* 0|1|0|0 */
style="color:red;" /* 1|0|0|0 */
The last example, which uses the style attribute, takes precedence over all other examples.
But remember! Inline style is always discouraged .
Finally, there is a final CSS keyword that overwrites all the previous ones, namely !important
By writing this keyword at the end of a CSS property, this will have priority over all those declared , even if there are selectors with greater specificity.
Let's take an example:
/*nell' HTML*/
<p style=”color: red;”>Ciao a tutti</p>
/*nel CSS*/
p {
color : green !important;
}
In this way, even if the selector for element p has less specificity than the inline style, thanks to the keyword !important the <p> tag will have a green color.
However, we advise against using this keyword because, in the long run, in a very large project it could give you many problems and override many classes, making it difficult to change the style of some elements.
