CSS is an abbreviation that stands for Cascading Style Sheets. As for Style Sheets, everything is clear: pieces of code with specific syntax are combined into files (Sheets), and they Stylize elements of the page to which a sheet is connected. But what about Cascading? We will discuss it in more detail in this topic.
What is the cascade
The cascade is a feature that is used when more than one CSS rule controls an element's styling. This feature helps to define what rule should be applied in each situation.
The first thing that influences the choice of the rule is the source order. Suppose we have a page with a connected stylesheet.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<span>A string.</span>
</body>
</html>CSS:
span {
color: red;
}
span {
color: blue;
}What color do you think "a string" will have? The answer is blue because the rule with color: blue is placed below the rule with color: red. Feel free to check it out yourself.
So the first factor of the cascade is quite simple: the rule stated the latter applies. This is also true for several stylesheets: if more than one stylesheet is connected to a document, and they have rules with the same selectors, then the rule that is located in the lowest part of the document will be applied. Let's add one more stylesheet to the HTML above:
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<link href="styles1.css" rel="stylesheet">
</head>
...And write the third color rule in styles1.css:
span {
color: purple;
}After you save it the string becomes purple, because the "purple" rule is the last one in this queue:
Note that the source-ordering works only for the same properties in the rules. Consider an example that is different from the one above: if the first rule defines the color of the text, and the second rule defines the size of the text, they don't conflict on this and don't replace each other.
Specificity
The second factor is specificity. We will not repeat the whole algorithm of creating the specificity weight, just remember that the rule with the most specific selector wins. Take a look at an example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<span>A simple string.</span>
<br>
<span class="numerated">The first string.</span>
</body>
</html>CSS:
.numerated {
color: red;
}
span {
color: blue;
}The result is:
The string with class="numerated" is red, although this rule is above the rule with color: blue. But rule with color: red has a more specific selector, so it was the one applied.
Importance
The third factor is importance. There is a magic spell !important in CSS that strengthens property's power. Let's go back to the previous example and add this spell to the last string in CSS:
.numerated {
color: red;
}
span {
color: blue !important;
}The HTML remains the same. Now the result is:
Both strings are blue. !important made the color property from span more significant than the one from .numerated. Note that it affects only the string where !important is added to, not all the properties inside the rule.
With great power comes great responsibility. Use !important only if it's really necessary (it happens quite rarely). Often it's better to reorganize your CSS.
Don't forget that the semicolon goes after !important, not before.
Location
And the last factor of the cascade is the location of the rule. There are three origins which rules can come from:
Author origin: styles added by the developer of the page, their own or external ones;
User origin: styles added by user choice, for example with service like this one;
User-agent origin: styles that are default in the user's browser. You can see them when no CSS is applied to a page.
Extensions to CSS also add animation and transition origins. They contain rules which tell an element how to move. Rules from stylesheets related to animation and transition have the highest priority. Rules from the author, user, and user-agent origins go after them respectively.
Conclusion
In this topic we've considered four parts of the cascading algorithm: source order, specificity, importance, and location. This system may look complicated in big projects, but if you understand how ordering should go, you will easily untie this metaphorical knot.