CSS Inheritance

CSS Inheritance

CSS inheritance allows certain property values applied to an element to be passed to its descendant elements.

Inheritance helps reduce repetitive CSS because properties such as text color and font settings can often be declared on a parent element and automatically used by the elements inside it. Not every CSS property is inherited, so understanding which values pass to descendants is an important part of working with CSS.

How Inheritance Works

When an inherited property is given a value on a parent element, descendant elements can use that value when they do not have another value specified for the property.

body {
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
}

Because color and font-family are inherited properties, text in many elements inside the <body> will use these values unless another CSS rule provides a different value.

<body>
  <h1>Page Heading</h1>
  <p>This paragraph inherits the body styles.</p>
</body>

This makes it possible to establish common text styles near the top of the document instead of repeating them for every descendant element.

Inherited Properties

Many properties related to text and typography inherit by default. Common examples include color, font-family, font-size, font-style, font-weight, line-height, and text-align.

.article {
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

Text within descendant elements of .article can inherit these values without requiring the same declarations on each individual element.

Whether a property inherits by default is defined by that property's CSS specification. It is not determined by the HTML element being styled.

Non-inherited Properties

Many properties that control an element's box, dimensions, positioning, and background do not inherit by default. Examples include margin, padding, border, width, height, and background-color.

.container {
  border: 2px solid #0088cc;
  padding: 20px;
}

The border and padding apply to the .container element itself. Its child elements do not automatically receive the same border or padding.

This behavior prevents layout and box styles from automatically being repeated throughout an entire group of nested elements.

Overriding Inherited Values

A descendant element can receive its own value for an inherited property. When that happens, the specified value on the descendant is used instead of the inherited value.

.article {
  color: #333333;
}
.article .warning {
  color: red;
}

Most text inside .article inherits #333333, but an element with the warning class uses red because a declaration directly sets its color.

The inherit Keyword

The inherit keyword explicitly tells a property to use the computed value of the same property from its parent element.

.child {
  border-color: inherit;
}

This keyword can be used with properties that normally inherit and with properties that normally do not inherit.

.parent {
  border-color: blue;
}
.child {
  border-style: solid;
  border-width: 2px;
  border-color: inherit;
}

In this example, border-color does not normally inherit, but the inherit keyword explicitly gives the child the parent's computed border color.

Initial, Unset, and Revert

CSS provides several global keywords that can be used to control how a property receives its value.

initial sets a property to its initial value as defined by CSS.

p {
  color: initial;
}

unset behaves like inherit when the property normally inherits and like initial when the property does not normally inherit.

p {
  color: unset;
}

revert rolls the property back according to the cascade, allowing a value from an earlier origin or cascade context to take effect.

p {
  color: revert;
}

These keywords are useful when styles need to be reset or returned to values established elsewhere in the cascade.

CSS Inheritance Example

The following example demonstrates an inherited text color, an overridden inherited value, and a border that does not automatically pass from the parent to its children.

<style>
.parent {
  color: blue;
  border: 2px solid #333333;
  padding: 12px;
}
.special {
  color: red;
}
</style>

<div class="parent">
  <p>This paragraph inherits the blue text color.</p>
  <p class="special">This paragraph overrides the inherited color.</p>
</div>

The first paragraph inherits the blue text color from its parent. The second paragraph receives its own red color. The parent's border surrounds the parent container but is not inherited by either paragraph.