Definition
The CSS Cascade is the mechanism that resolves conflicts between competing CSS style rules applying to an element by using priority, specificity, and source order.
Why It Matters
Without the cascade, the browser would not know how to resolve overlapping styles, leading to unpredictable layouts. It is the defining feature of CSS.
Core Concepts
- Cascade Priority: Rules are evaluated by origin: Author styles beat user styles beat browser defaults.
- Specificity: Evaluates which selector is more specific. ID selectors beat classes beat elements; inline styles beat external sheets.
- Source Order: If Origin and Specificity are equal, the last declared rule wins.
/* Element selector: Specificity 0,0,1 */
p { color: blue; }
/* Class selector: Specificity 0,1,0 (Wins over blue) */
.highlight { color: red; }
/* ID selector: Specificity 1,0,0 (Wins over .highlight) */
#main-text { color: green; }