Inheritance

Properties like `color` and `font-family` flow down from parent to child. Layout properties don't.

3 min read Level 1/5 #css#inheritance#defaults

What you'll learn

When no rule sets a property on an element, the element either inherits the value from its parent or uses the property’s default.

What Inherits By Default

Most text-related properties inherit:

The “text and look” properties inherit. Layout, sizing, and visual effects don’t.

Set the design’s defaults on :root or body, then let everything inherit:

:root {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
}

Every element inherits these unless overridden. No need to re-declare on every component.

Use inherit to make a normally non-inheriting property pick up the parent’s value:

button {
  font-family: inherit;   /* match the page font instead of system default */
  color: inherit;
}

Form controls (<button>, <input>, <select>) DON’T inherit typography by default. Explicitly setting font: inherit is a common pattern.

Keyword	Effect
`inherit`	Use the parent’s value
`initial`	Use the CSS spec’s default for this property
`unset`	Inherit if it would naturally; otherwise `initial`
`revert`	Roll back to the browser’s default for this element

revert is the friendliest — “act like CSS didn’t change anything about this property”.

.reset-list {
  list-style: revert;   /* show the browser default bullets again */
}

Sometimes you want to reset many properties at once:

.brand-area {
  all: unset;
  /* now style from scratch */
  display: block;
  font-family: "Brand", sans-serif;
}

Use sparingly — all: unset is dramatic. Usually targeted resets are clearer.

The fundamental rectangle every element occupies — the box model.