CSS Cascading Order
CSS - Cascading Order
We learned that CSS refers to cascading style sheets. We discussed how to use the style sheets, but you might be wondering what does this cascading mean?
Well cascading refers to the cascading order
Now let us learn about cascading order
If styling is mentioned using multiple ways ultimately they cascade to one style.
If multiple styles are specified for the same element within the style sheet then the priority is as below.
Thumb Rule: If two rules have the same weight, the latter wins.
For example, Imported style sheets and internal style sheets actually carry the same weight, but since imported styles are considered to be before any rules in the style sheet itself, the latter will win (the internal).
In addition to internal priority specificity also counts. A Specificity is a 3-digit number.
For example, if specificity is 123 then,
- 1 refers to the number of id selectors
- 2 refers to the number of class selectors
- 3 refers to the number of elements
Highest specificity always wins.