Inheritance

Once the cascade has picked a value on an element, some of those values flow down to its children. That’s inheritance, and it’s why you don’t have to set the font on every single element.

This is what we did on the course page:

body {
  color: #222;
  font-family: system-ui, sans-serif;
}

Every heading, paragraph, and link on the page picked up that color and that font. We wrote the rule once, on the outermost element, and inheritance did the rest.

What inherits and what doesn’t

Not every property inherits. The rule of thumb: properties about text inherit, properties about boxes don’t.

color, font-family, font-size, line-height, text-align inherit. margin, padding, border, width, background don’t. Imagine if they did: set a border on body and every element inside would get its own border. That would be useless.

Notice that the computed value inherits. If body has font-size: 1.5rem, children inherit 24px, not 1.5rem. That detail matters when we get to units.

Inherited values are weak

An inherited value only fills the gap when nothing targets the element directly. Any declaration that matches the child wins over it, no matter how specific the ancestor’s rule was.

That’s why links stay blue inside a body { color: #222 }. The browser’s default stylesheet has an a { color: ... } rule. It’s a low-specificity type selector, but it targets the link directly, so it beats the inherited color from body.

The global keywords

Four keywords let you control inheritance on any property:

• inherit takes the parent’s computed value, even for properties that don’t normally inherit.
• initial resets to the property’s default value from the spec.
• unset acts like inherit for inherited properties and initial for the others.
• revert rolls back to the value from the previous origin, usually the browser’s default style.

There’s also revert-layer, which rolls back only to the previous cascade layer.

The one I use most is inherit, and mostly for form controls. Browsers give button, input, select, and textarea their own font, so they ignore the font you set on body. This fixes it:

button,
input,
select,
textarea {
  font: inherit;
}

Now form controls look like the rest of the page.

Try it on the course page. Inspect a paragraph inside a card and open the Computed panel. Expand color and it shows the value came from body. Then add color: initial, inherit, unset, and revert to .card p one at a time and watch the value change. initial gives you the spec default, which renders as black, and revert gives you the browser’s default. For color the two look the same, but for a property like display on a div they would differ.

Quick check

Start quiz

Result

You got of right.

Try again