Episode 1 — Fundamentals / 1.6 — CSS Core Fundamentals

1.6.c — Inheritance & Computed Styles

In one sentence: Some CSS properties flow down from parent to child automatically (inheritance), while others don't — and the computed value of any property is what the browser actually uses after resolving cascading, inheritance, and relative units.

Navigation: ← 1.6.b — Specificity & Cascade · 1.6.d — Box Model →

1. What inherits (and what doesn't)

Inherited by default

Properties related to text and typography generally inherit:

Category	Examples
Font	`font-family`, `font-size`, `font-weight`, `font-style`, `line-height`
Text	`color`, `text-align`, `text-transform`, `letter-spacing`, `word-spacing`
List	`list-style`, `list-style-type`
Visibility	`visibility` (but not `display`)
Cursor	`cursor`

NOT inherited by default

Properties related to layout and box geometry:

Category	Examples
Box model	`margin`, `padding`, `border`, `width`, `height`
Background	`background`, `background-color`
Position	`position`, `top`, `left`, `z-index`
Display	`display`, `overflow`, `float`
Flexbox / Grid	`flex`, `grid-template-*`, `gap`

Mental model: "Would it make sense for every child to have the same value?" — yes for font-family, no for margin.

2. Controlling inheritance explicitly

Keyword values

Keyword	Effect
`inherit`	Force this property to take the parent's computed value
`initial`	Reset to the CSS specification default (not the browser default)
`unset`	If the property inherits, act like `inherit`; otherwise act like `initial`
`revert`	Roll back to the user-agent stylesheet value (the browser default)
`revert-layer`	Roll back to the previous cascade layer (newer, layer-aware)

/* Force border to inherit (it normally doesn't) */
.child {
  border: inherit;
}

/* Reset all properties to initial/inherited defaults */
.reset {
  all: unset;
}

`all` shorthand

all: unset or all: revert resets every property on the element — useful for component isolation, but powerful and potentially surprising.

3. The computed value pipeline

The browser resolves each property through stages:

Specified value  →  Computed value  →  Used value  →  Actual value

Stage	What happens
Specified	Cascaded winner, or inherited, or initial
Computed	Relative values resolved where possible (`em` → `px` based on parent, `%` of parent where calculable)
Used	Layout-dependent values finalized (e.g. `width: 50%` after parent width is known)
Actual	Rounded/clipped to hardware (e.g. sub-pixel to whole pixel)

Why this matters: when you read getComputedStyle() in JS, you get the computed or used value — not the authored string. DevTools "Computed" tab shows these resolved values.

4. Practical inheritance patterns

Setting document-wide typography

:root {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a2e;
}

Every element inherits these — override only where needed. This is why rem units work: they reference the :root font-size.

Breaking inheritance when needed

/* Buttons don't inherit font by default in some browsers */
button, input, select, textarea {
  font: inherit;
}

Form elements historically had their own font stacks from user-agent stylesheets — font: inherit normalizes them.

5. DevTools: inspecting the cascade

Elements → Styles panel shows matched rules in specificity order (highest at top); crossed-out declarations lost the cascade.
Computed tab shows the final resolved value for every property and which rule provided it.
Click a computed value to jump to the winning selector.

6. Key takeaways

Text/typography properties inherit; box/layout properties do not.
Use inherit, initial, unset, revert to control inheritance explicitly.
The computed value is what the browser actually uses — inspect it in DevTools.
Set typography on :root or body and let inheritance flow — override locally.
Normalize form elements with font: inherit to fix inconsistent user-agent styles.

Explain-It Challenge

Explain without notes:

Why setting color on <body> automatically colors all text, but setting border does not give every child a border.
The difference between initial and revert — which gives you the browser's default?
Where you would see the computed value in DevTools, and why it might differ from what you typed.