Lesson 4 of 50 · css
The Cascade & Specificity
Duration: 12 mins
When several rules match the same element the cascade decides which wins.
- Origin – user agent → user → author → inline.
- Importance –
!importantoverrides normal rules. - Specificity – calculated from ID, class/attribute/pseudo‑class, element selectors.
Specificity score: inline(1,0,0,0) > id(0,1,0,0) > class(0,0,1,0) > element(0,0,0,1).
Example: Specificity battle
/* lowest */ p { color:gray; }
/* higher */ .note { color:blue; }
/* highest */ #important { color:red; }