The Cascade & Inheritance

The "C" in CSS stands for Cascading. Understanding how styles cascade and how properties inherit is the key to writing CSS that behaves predictably — and to debugging it when it doesn't.

What is the Cascade?

When multiple CSS rules target the same element and set the same property, only one value can win. The cascade is the algorithm the browser uses to decide which value applies.

The cascade considers three things, in this order:

Origin & Importance — where did the rule come from, and does it have !important?
Specificity — how specific is the selector?
Source Order — which rule appeared later in the code?

🏆 Analogy: The cascade is like a tiebreaker system

Imagine two people both claim a seat on a plane. First you check ticket class (origin). If equal, you check seat number (specificity). If still equal, you check who boarded first (source order). The cascade works exactly like this — each tiebreaker only matters when the previous one was a tie.

Step 1 — Origin and Importance

CSS can come from three places, in priority order (highest to lowest):

Priority	Source	Example
1st	User agent `!important`	Browser's own critical overrides
2nd	Author `!important`	Your CSS with `!important`
3rd	Author normal	Your regular CSS rules
4th	User styles	Reader's custom browser styles
5th	User agent defaults	Browser's built-in styles

In practice, as a web developer your CSS lives at level 3 (author normal) or level 2 (author !important). You rarely need to think about the others.

Step 2 — Specificity

If two rules from the same origin conflict, the more specific selector wins. Specificity is scored as three columns (A, B, C):

/* (A, B, C) */
p              /* (0, 0, 1) — element */
.intro         /* (0, 1, 0) — class */
p.intro        /* (0, 1, 1) — element + class */
#hero          /* (1, 0, 0) — ID */

/* .intro wins over p — class (B column) beats element (C column) */
p     { color: grey; }    /* loses */
.intro { color: blue; }   /* wins */

We cover specificity in full detail in the next lesson.

Step 3 — Source Order

If two rules have the same origin AND the same specificity, the one that appears later in the code wins. This is source order.

p { color: red; }   /* declared first */
p { color: blue; }  /* declared second — wins */

/* The paragraph will be blue */

This is also why the order you link stylesheets matters — a stylesheet linked second can override one linked first (assuming equal specificity).

What is Inheritance?

Inheritance is a separate mechanism from the cascade. Some CSS properties automatically pass their value down from a parent element to its children — without you writing any extra rules.

body {
  font-family: Georgia, serif;
  color: #333;
  line-height: 1.6;
}
/* Every element on the page inherits these values automatically */
/* You don't need to set font-family on h1, p, li, span, etc. */

👨‍👧 Analogy: Inheritance is like genetics

A child inherits traits from their parents by default. You set font-family on body, and all descendants "inherit" that font — unless they explicitly choose a different one.

Which Properties Inherit?

Not all properties inherit. Generally:

Inheritable (text-related)	Not inheritable (box-related)
`color`	`margin`
`font-family`	`padding`
`font-size`	`border`
`font-weight`	`background`
`line-height`	`width` / `height`
`text-align`	`display`
`letter-spacing`	`position`

The logic: text properties inherit (so you don't set the font on every element), box model properties don't (so every element doesn't accidentally get the same margin).

Controlling Inheritance with Keywords

You can manually control inheritance with three special keywords:

/* inherit — force this property to take the parent's value */
a {
  color: inherit; /* links use the parent's text colour instead of browser default blue */
}

/* initial — reset to the CSS specification's initial value */
p {
  color: initial; /* resets to black (the spec default) */
}

/* unset — acts like inherit for inheritable props, initial for non-inheritable */
.reset {
  color: unset;
  margin: unset;
}

The initial and unset Values

These are different from browser defaults. The browser has its own stylesheet (user agent styles) that sets things like heading sizes and link colours. initial goes back to the CSS spec's starting point, which may differ from what the browser was showing.

✅ Tip — Use inherit for consistent link colours

By default, browsers give links a blue colour. If you want links to match surrounding text, set color: inherit on them — they'll pick up whatever colour their parent has.

Cascade vs Inheritance — The Difference

	Cascade	Inheritance
What it is	Algorithm for resolving conflicts between CSS rules	Properties passing from parent to child automatically
When it applies	When multiple rules target the same element + property	When no rule exists for an element's property
What controls it	Origin, specificity, source order	Whether the property is inheritable by nature

Interview Questions

What is the cascade in CSS?

The algorithm the browser uses to decide which CSS rule wins when multiple rules target the same element and property. It considers origin and importance first, then specificity, then source order (last wins).

What is inheritance in CSS?

The mechanism by which certain CSS properties (mostly text-related ones) automatically pass their values from parent elements to their children. It means you can set font-family once on body and all descendants get it.

What does the inherit keyword do?

It forces a property to take the computed value of its parent element, even if that property doesn't normally inherit. Useful for making links match surrounding text colour.

🏋️ Exercise

Predict the output:

body { color: #333; font-family: sans-serif; }
.box { color: blue; }
.box p { color: red; }
p { color: green; }

<body>
  <p>Paragraph A</p>
  <div class="box">
    <p>Paragraph B</p>
  </div>
</body>

See answers

Paragraph A: green — matched by p { color: green; } which has higher specificity than body's inherited colour.

Paragraph B: red — matched by .box p (specificity 0,1,1) which beats p (specificity 0,0,1) and overrides the inherited blue from .box.

Summary

The cascade resolves conflicts when multiple rules target the same property on the same element.
The cascade checks: origin & importance → specificity → source order.
Last rule wins when origin and specificity are equal.
Inheritance is separate — some properties (mostly text ones) automatically pass from parent to child.
Box model properties (margin, padding, border) do not inherit.
Use inherit, initial, or unset to manually control inheritance.