The "C" in CSS stands for Cascading. It is what gives the style sheets its cascading nature so understanding the cascade is an important part of learning CSS.
Overview
It is entirely possible for 2 or more competing CSS rules to be applied on the same HTML element. How does the browser decide which rule to choose in such case?
Consider the following 2 CSS rules that were applied on the same button.
Without the cascade algorithm, the browser would have a tough time determining the "winner" of this conflict.
So, what is the cascade?
The cascade is the algorithm used by the browser to solve conflicts where multiple CSS rules are applied to the same HTML element. It takes all the values given to a certain property, sorts them by their precedence and outputs the value with the highest precedence.
Note: Only CSS declarations i.e property-value pairs participate in this cascade.
Now, let's look at the different stages of this cascade algorithm.
Order of Appearance
The order in which CSS rules appear in the style sheet is taken into consideration.
In this example, the color orange was declared last. Because the crimson color was declared before the orange color, it is ignored by the browser.
Specificity
Specificity determines which selector is the most specific using a certain weighing mechanism. By making a rule more specific, it would win out over other rules that appear later in the style sheet.
Let us go back to our previous example and help crimson beat orange.
All classes have higher specificity than all elements. So in this example, the color is crimson because it has a class of heading. It does not matter that orange appeared later in the style sheet. Specificity is checked before order.
Note: An ID is even more specific than a class. In fact, ID selectors have the highest specificity among all selectors.
Importance
All CSS rules written by a developer have normal importance by default. We can give our rules higher importance by simply using the "!important" property in our rule.
Let's look at this in action.
Consider an ID selector used at the absolute bottom of the style sheet. That's the best possibility in both the specificity and order aspect.
But it still loses out to any random CSS rule that has the !important property. This means that importance plays an even bigger role than specificity and order in the cascade battle. So, the only way to beat an important rule is with an important rule that has higher specificity or better order.
Note: There are 4 types of importance rules possible. Animation rule has higher importance than a normal rule. Important rule has higher importance than an animation rule. Finally, Transition rule has higher importance than an important rule. This is because this rule is expected to always change the default visual state of the elements it is applied upon.
Origin
Now, let's understand the final factor in the cascade algorithm. The CSS written by a developer is not the only CSS that is applied to a web page.
When we define HTML elements, they have some CSS rules by default. Let's look at what default CSS rule a heading tag has.
The H1 element has a total of 7 property-value pairs! This is not surprising. After all, this is how the browser differentiates headings from normal text. All these default styles are present in the browser's "user agent stylesheet" as the picture displays.
The author, i.e the developer has the power to make changes in these predefined styles in their own stylesheet which is called the "author stylesheet". Let's change the default font-size of the H1 tag.
In this example, we used our stylesheet to override the default font-size of 2em that a H1 tag has by default.
However, if a user agent stylesheet has an !important property in any of its rule, then not even an author stylesheet with the !important property can override it.
There's also something called as a "user stylesheet" involved in this hierarchy but since most modern browsers do not directly support this feature anymore, this article will not cover it. Here's an image that'll help you understand the whole origin hierarchy. (Credits to web.dev)
Conclusion
The Chrome Devtools is a nice way to debug issues caused due to the cascade. For any chosen element, it'll display all the rules that were applied to it and strike off those rules which were not accepted by the browser. If you still have issues fixing them, you can always rely on the !important property to come to your rescue.
That's about it! Thank you for reading.
Top comments (0)