Retour au cours

Lesson 37: The Cascade: Understanding Order and Origin

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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 */ }