Episode 9 of 53

What is the Cascade in CSS?

Understand the cascade — the algorithm CSS uses to decide which styles win when there are conflicts.

The "C" in CSS stands for Cascading. The cascade is the algorithm that determines which CSS rule applies when multiple rules target the same element.

The Three Pillars of the Cascade

When the browser encounters conflicting styles, it resolves them using three factors (in order of priority):

  1. Importance — Is the rule marked !important?
  2. Specificity — How specific is the selector?
  3. Source order — Which rule comes last in the code?

Source Order

If two rules have the same specificity, the one that appears later in the stylesheet wins:

p {
    color: red;
}

p {
    color: blue;  /* This wins — it comes later */
}

A Simple Example

/* Rule 1 */
p {
    color: red;
    font-size: 16px;
}

/* Rule 2 — same specificity, comes later */
p {
    color: blue;
}

/* Result: paragraphs are blue, font-size remains 16px */

Notice that only the conflicting property (color) is overridden. The non-conflicting font-size still applies from Rule 1.

Why This Matters

Understanding the cascade helps you predict which styles will apply and debug unexpected styling. We'll explore specificity and importance in upcoming episodes.