37. The Cascade: Understanding Order and Origin

CSS stands for Cascading Style Sheets. The 'Cascade' is the set of rules that determines which style declaration wins when multiple rules target the same element.

Three Main Factors of the Cascade

If two declarations conflict, the browser checks these factors in order:

1. Origin

Styles come from different sources, and some sources have higher priority:

1. User Agent (Browser) Styles: Defaults (e.g., blue links, large h1).
2. User Styles: Styles set by the user in their browser preferences (for accessibility).
3. Author Styles (Your CSS): Styles defined by the web developer.
4. !important (Author): Your styles marked with !important (should be avoided).
5. !important (User): User styles marked with !important (highest possible priority).

If the origin is the same (e.g., both are Author Styles), the browser moves to Specificity.

2. Specificity

This is the calculated 'weight' of the selector (Lesson 38).

3. Order

If the Origin and Specificity are exactly the same, the last rule declared in the stylesheet wins. Rules declared later override rules declared earlier.

css p { color: red; /* Declared first */ }

p { color: blue; /* Declared last, so the text is BLUE */ }