Inheritance

After the cascade chooses values on a parent, some computed values pass to descendants. Text color and font settings usually inherit; borders, margins, and widths usually do not.

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

Most descendants use those values unless another rule overrides them.

An inherited value is weaker than any declaration that directly targets the child. A low-specificity a { color: ... } beats a highly specific color inherited from an ancestor because the link has its own cascaded value.

Global keywords give you control:

• inherit uses the parent’s computed value.
• initial uses the property’s defined initial value.
• unset behaves like inherit for inherited properties and initial for others.
• revert rolls back to an earlier cascade origin or layer.

revert-layer rolls back only within the current cascade layer, which can be useful when a utility should expose the value from an earlier layer.

Form controls do not always inherit typography as you expect, so projects often set button, input, select, and textarea to font: inherit.

Inspect a nested element’s Computed panel and expand color or font-family to see the ancestor it came from. Then set color: initial, inherit, unset, and revert one at a time. The result depends on the property’s inheritance behavior and cascade position, not on whether the keywords sound similar.

Quick check

Result

You got of right.

Try again