Introduction
When I first learnt the term CSS (Cascading Style Sheets), I was very curious to know why is it called 'cascading'? My first thought was there must be something like a cascade: a small waterfall, that falls in stages down a slope. And I was correct to certain extent. The concept is similar to this waterfall. Let us understand this in some detail.
CSS allows us to apply many style sheets to the same document and therefore, there are chances of conflicts between these style sheets. For example, what should the browser do if the imported style sheet says that the h1 element should be orange and the embedded style sheet sets the h1 to blue? In this case, both the rules with h1 selectors have equal weights.
The folks who wrote CSS specifications anticipated this issue and devised a hierarchical system that assigns different weights to the various sources of style information.
The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down ("cascades" down) until it is overridden by a style rule with more weight.
-Jennifer Niederst Robbins
Weight is determined based on the three criteria:
- the priority of the style rule source
- the specificity of the selector
- rule order
Priority
If no style information is applied to a web page, the browser will still render the web page using its (browser's) internal style sheet. This is also called the default rendering, the W3C calls it user agent style sheet.
Individual users can also apply their own style sheet and are known as user style sheet or reader style sheet, which overrides the default styles in their browser. However, if there is an author declared style sheet attached to the web page, that overrides both the user and the user agent style sheet. Author declared style sheet is also known as author style sheet.
There is one exception to this. If the user has identified any style as "important" then it will override all the competing styles. This empowers users so that they can keep (or save) their setting preferences. For example, users with sight impairment might need extra large fonts.
Figure below summarizes this visually.
Specificity
The times when two rules in a style sheet conflict, the type of selector is used to determine the winner. The more specific the selector, more power it has to override conflicting declarations.
Let's see an example for this, there may be a rule that applies to all the paragraphs and another rule for a paragraph that has the ID "intro". Which rule gets applied to the intro paragraph? The answer is the selector that includes the ID name (#intro) is more specific than a general element selector(like p). Therefore, the rule would apply to the 'intro' paragraph, overriding the rules set for all paragraphs.
In short, more specific selectors have more weight when it comes to handling style rule conflict.
To calculate specificity,
- start by drawing three square brackets: [ ] [ ] [ ]
- count the number of IDs in the selector, and put that number in the first box
- count the number of classes and pseudo-classes and put that number in the second box
- count the element names, and put that number in the third box
- specificity is compared box by box
- the first box that is not a tie determines which selector wins
Rule Order
After all the style sheet sources have been sorted by priority, and after all the linked and imported style sheets have been shuffled into place, there are likely to be conflicts in rules with equal weights. In that case, the order in which the rules appear in important.
The cascade follows a "last one wins" rule. Whichever rule appears last has the last word.
-Jennifer Niederst Robbins
Even in the same style sheet, if there are conflicts, the rule in the style sheet that comes last wins.
For example,
<style>
h1 {color: green;}
h1 {color: blue;}
h1 {color: red;}
</style>
/* In this example, the heading h1 will be of red color */
Conclusion
The name cascading comes from the fact that a specified scheme is used to determine which style rule applies to a particular element when there are more than one style rules applied to that element. Priority, specificity and rule order together determines this scheme.
Thank you for reading. I hope I was able to explain. Please let me know in the comments below if this article can be improved in any way.