The full form of CSS is Cascading Style Sheet. So, Cascading is a very important topic in CSS. Know every bit of CSS Cascade from this tutorial and gain enough knowledge to code anything in CSS.
What does it mean?
“Cascading” in this context means that because more than one stylesheet declaration could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.
The rule used is chosen by cascading down from the more general declarations to the specific rule required. The most specific declaration is chosen.
It works taking into consideration:
- specificity
- importance
- inheritance
- order in the file
Some resolving conflicts are also can be taken care of by cascading.
Suppose one or two styles in CSS applied on a specific part of HTML are competing over one another for which one to be applied.
Also, if we use our custom CSS then also there will be a conflict as the browser provides a default CSS or default set of rules. After the browser CSS, our CSS comes into play. The browser then applies our custom CSS to the webpage.
All those rules come into play while rendering the page.
Cascading Origins & Importance
Each style practice has a cascade origin, which defines where it starts the cascade. CSS describes three core origins:
1. Author Origin: The author defines style sheets for a source document as per the conventions of the document language. For example, in HTML, style sheets may be involved in the document or connected externally.
2. User Origin: The User may define style information for a particular document. For illustration, the user may specify a file that includes a style sheet or the user agent may implement an interface that creates a user style sheet (or acts as if it did).
3. User-Agent Origin: Submitting user agents need to apply a default style sheet (or act as if they did). A user agent’s default style sheet must exhibit the elements of the document language in ways that meet general presentation expectations for the document language.
Read More:
The Cascade Rules
Following points are some of the important rules of Cascade in CSS:
- Find all declarations whose selectors match a particular element.
- Sort the selectors by specificity
- Sort these declarations by weight and origin
- Sort by order specified
Cascading order
The algorithm of cascading discovers how to obtain the value to implement for each property as each document element.
- It originally filters all the laws from the various sources to retain only the rules that connect to a given element. That implies rules whose selector resembles the given element and which are part of a relevant
mediaat-rule. - Later it orders these rules as per their importance, such, whether or not they are supported by
!important, and by their origin. The cascade is in ascending order, which indicates that!importantvalues from a user-defined style sheet have precedence over normal values started from a user-agent style sheet:
| Origin | Importance | |
|---|---|---|
| 1 | user agent | normal |
| 2 | user | normal |
| 3 | author | normal |
| 4 | animations | |
| 5 | author | !important |
| 6 | user | !important |
| 7 | user agent | !important |
| 8 | transitions |
- In the case of equality, the specificity of a value is estimated to pick one or the another.