CSS Inheritance: How Styles Pass from Parent to Child Elements

What is CSS Inheritance?

CSS inheritance is the mechanism by which certain CSS property values are passed down from parent elements to their children. This means you don't have to set every property on every element — child elements automatically receive some styles from their parents.

body {
  color: #333;
  font-family: 'Arial', sans-serif;
}

With just these two lines, every text element inside the body will use the color #333 and Arial font — unless specifically overridden.

Why Does Inheritance Exist?

Imagine having to set the font-family on every single p, h1, span, li, and a tag individually. Inheritance saves you from that repetition by automatically flowing certain styles down the element tree.

<div class="article">
  <h2>Title</h2>
  <p>This paragraph <strong>inherits</strong> the font from .article</p>
  <ul>
    <li>This list item also inherits the font</li>
  </ul>
</div>

.article {
  font-family: Georgia, serif;
  color: #444;
  line-height: 1.8;
}
/* All children automatically get Georgia font, #444 color, and 1.8 line-height */

Which Properties Are Inherited?

Not all CSS properties are inherited. There is a clear distinction:

Commonly Inherited Properties

These properties pass from parent to child by default:

• Text properties: color, font-family, font-size, font-weight, font-style, line-height, text-align, text-indent, text-transform, letter-spacing, word-spacing
• List properties: list-style, list-style-type, list-style-position
• Other: visibility, cursor, direction, quotes

Properties That Are NOT Inherited

These properties do NOT pass to children:

• Box model: margin, padding, border, width, height
• Layout: display, position, float, clear, overflow
• Background: background, background-color, background-image
• Spacing: gap, column-gap, row-gap

The General Rule

Properties related to text and typography are generally inherited. Properties related to layout, sizing, and decoration are not.

Controlling Inheritance with CSS Keywords

CSS provides special keywords to control inheritance behavior:

The inherit Keyword

Forces a property to inherit its parent's value, even if it normally wouldn't:

.parent {
  border: 2px solid blue;
}

.child {
  border: inherit; /* Now the child gets the parent's border */
}

The initial Keyword

Resets a property to its default value as defined by the CSS specification:

p {
  color: initial; /* Resets to black (browser default) */
}

The unset Keyword

It behaves like inherit for inherited properties and like initial for properties that are not inherited.

.reset {
  color: unset;   /* Same as inherit (color is inherited) */
  border: unset;  /* Same as initial (border is not inherited) */
}

The revert Keyword

Reverts the property to the value that would have been applied by the browser's default stylesheet:

h1 {
  font-size: revert; /* Goes back to browser's default h1 size */
}

The all Property

The all property lets you reset every CSS property at once:

.fresh-start {
  all: unset; /* Resets ALL properties */
}

.use-defaults {
  all: revert; /* Reverts ALL properties to browser defaults */
}

This is useful when you want to completely reset an element's styling.

Inheritance and Specificity

Inherited values have no specificity — they are easily overridden by any direct rule:

body { color: blue; }

/* This wins over the inherited blue, even though it's just an element selector */
p { color: red; }

Even the universal selector (specificity 0,0,0,0) beats inheritance:

body { color: blue; }
* { color: black; }
/* All elements are black - the universal selector beats inheritance */

Practical Inheritance Patterns

Setting Base Typography

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

Fixing Link Color Inheritance

Links don't inherit color by default (browsers set them to blue). You can fix this:

a {
  color: inherit; /* Now links match their parent's text color */
}

Inheriting Backgrounds

Backgrounds are not inherited, but child elements are transparent by default, so the parent's background shows through — this looks like inheritance but technically isn't.

.card {
  background: #f5f5f5;
}
/* Child elements appear to have the same background,
   but they're actually transparent */

Summary

CSS inheritance automatically passes certain property values from parent to child elements. Text and typography properties are inherited while layout and box model properties are not. Use the keywords inherit, initial, unset, and revert to control this behavior. Understanding inheritance helps you write less CSS by setting base styles on parent elements and only overriding where needed.