CSS Inheritance

What Is Inheritance?

In CSS, some properties applied to a parent element are automatically passed down to its children. This behavior makes sense for certain properties (like fonts and text styles) because it saves us from repeating the same rules everywhere.

For example:

  • Setting a font-family on the <body> means all child elements inherit that font.
  • But properties like background-color are not inherited, since it wouldn’t make sense for every child to share the same background.

Inheritance helps keep CSS concise and maintainable.

Commonly Inherited Properties

Not all properties inherit, but here are some of the most common ones you’ll encounter:

  • Text & font-related: color, font-family, font-size, font-style, font-weight, line-height, letter-spacing, text-align, text-indent, text-shadow, text-transform, word-spacing
  • List-related: list-style, list-style-type, list-style-position, list-style-image
  • Other useful ones: cursor, quotes, visibility, white-space, direction

(This list is not exhaustive, but covers the most popular inherited properties.)

Forcing a Property to Inherit

If a property does not inherit by default, you can force it to by using the keyword inherit.

Code Block Loading...

Preventing Inheritance

Sometimes you may want to stop inheritance. Use the keyword revert to reset the property back to the browser’s default stylesheet value.

Code Block Loading...

In practice, developers often just overwrite the inherited value with a new one instead of using revert.

Other Special Values

CSS provides additional keywords to control inheritance:

  • initial → Resets the property to its default browser value.
  • unset → Acts like inherit if the property normally inherits; otherwise, it resets to initial.

Key Takeaways

  • Inheritance reduces repetition and keeps CSS clean.
  • Text and font properties are the most commonly inherited.
  • Use inherit, revert, initial, and unset to fine‑tune inheritance behavior.
  • Always consider whether inheritance makes sense for the property you’re styling.