jsschools
The Cascade

When Multiple Rules Match, the Cascade Decides

The Cascade

The cascade is the algorithm CSS uses to pick a winner among conflicting rules — by origin, importance, specificity, and source order.

4 min read Level 2/5 #css#cascade#specificity
What you'll learn
  • Read the cascade order
  • Know what `!important` does (and when to use it)
  • Recognize layer effects (coming next lesson too)

When several rules match the same element and set the same property, the cascade picks the winner. Four factors, in priority order.

The Order (Highest Priority Last)

  1. Origin and importance — user-agent vs author vs user, plus !important flag
  2. Cascade layer — later layers beat earlier (coming up in Modern CSS)
  3. Specificity — more specific selectors win (next lesson)
  4. Source order — later rules beat earlier ones if everything else ties

Origin (Usually Doesn’t Matter)

OriginWhere it comes from
User-agentBrowser’s built-in defaults
UserUser-configured browser CSS (rare)
AuthorYOUR stylesheets

Author CSS overrides browser defaults. You almost never need to think about origin — until !important enters the picture.

!important

A declaration with !important jumps ahead of all non-important rules at the same origin:

.warn {
  color: red !important;
}

Now any other rule trying to override color on .warn loses, unless it’s ALSO !important with higher specificity.

Legitimate uses:

  • Utility class overrides (e.g., Tailwind’s ! prefix)
  • Overriding a third-party library you can’t edit
  • Print styles that must win

Source Order — The Tiebreaker

When two rules have the same specificity and no !important, the later one wins.

.btn { background: blue; }
.btn { background: green; }   /* wins — same specificity, later */

This is why bundling order matters — Tailwind utilities load last so they can override your component styles.

Sources of Rules in Order

For a single page, browsers compute styles by considering:

  1. Browser defaults (low)
  2. Linked stylesheets (in <link> order)
  3. <style> blocks (in document order)
  4. Inline style attributes (high)
  5. !important overrides (highest)

Inheritance Is Different

The cascade picks among directly matching rules. If no rule matches, some properties (color, font) are inherited from the parent — that’s the next-but-one lesson.

Up Next

The most-misunderstood half of the cascade: specificity.

Specificity →