The CSS Cascade
When multiple rules target the same element, the cascade determines which one wins. It considers importance, specificity, and source order.
Later rules override earlier ones when specificity is equal.
HTML
Intermediate
5 min read
Understanding the CSS Cascade
Example
/* Source order: last one wins if specificity is equal */
p { color: blue; }
p { color: red; } /* This wins */
/* !important overrides everything (avoid when possible) */
p { color: green !important; } Pro Tip
Understand the cascade before reaching for !important — most specificity problems can be solved with better selectors.