CSS Inheritance

CSS Inheritance

CSS inheritance allows some property values applied to a parent HTML element to be used by its descendant elements. Inheritance reduces the need to repeat the same CSS declarations for every element contained within a section of a page.

How CSS Inheritance Works

When a CSS property is inherited, a descendant element can use the value from an ancestor when the property has not been given another applicable value of its own.

body {
  color: #333333;
}

The color property is inherited, so text inside many descendant elements can use the color assigned to the <body> element without requiring a separate color declaration for each element.

<body>
  <h1>Page Heading</h1>
  <p>This is a paragraph.</p>
</body>

Unless another rule changes their text color, the heading and paragraph can inherit the #333333 color from the <body> element.

Parent and Child Elements

HTML elements are nested inside other elements, creating relationships between parents, children, and other descendants. CSS inheritance follows these relationships through the document.

<div class="message">
  <p>This paragraph contains <strong>important text</strong>.</p>
</div>

.message {
  color: blue;
}

The <p> element is a child of the <div>, while the <strong> element is a descendant of the <div>. Because color is inherited, both can use the blue text color.

Common Inherited Properties

Many CSS properties related to text and typography are inherited by default. This makes it possible to establish common text styles on a parent element and allow its descendants to use them.

For example, setting a font-family on the <body> element allows much of the text throughout the page to use that font without repeating the declaration on every element.

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

Properties That Do Not Normally Inherit

Not every CSS property is inherited. Many properties that control an element's box, background, borders, and dimensions do not normally pass their values to descendants.

.box {
  border: 2px solid blue;
}

<div class="box">
  <p>This paragraph is inside the bordered div.</p>
</div>

The border belongs to the <div>. The paragraph inside it does not inherit its own 2px blue border.

Overriding Inherited Values

An inherited value can be replaced by a declaration that applies directly to a descendant element.

.message {
  color: blue;
}

.message strong {
  color: red;
}

<div class="message">
  <p>This text is blue, but <strong>this text is red</strong>.</p>
</div>

The paragraph inherits blue from its ancestor. The <strong> element receives its own red color declaration, so it does not use the inherited blue value.

The inherit Keyword

The CSS inherit keyword tells a property to use the computed value of the same property from its parent element. It can be used even with properties that are not normally inherited.

.parent {
  border: 2px solid blue;
}

.child {
  border: inherit;
}

<div class="parent">
  Parent
  <div class="child">Child</div>
</div>

The border property is not normally inherited, but border: inherit; explicitly tells the child to use its parent's computed border value.

Why Inheritance is Useful

Inheritance helps reduce repeated CSS. Instead of assigning the same font and text color to every paragraph, heading, list, and other text element individually, common styles can often be established on an ancestor.

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

Descendant elements that inherit these properties can then use the values automatically. Individual elements can still receive different values when needed.

Understanding inheritance also helps explain why an element may have a style even when you cannot find that property declared directly on the element. The value may have come from one of its ancestors.

Summary

CSS inheritance allows certain property values to pass from ancestor elements to their descendants. Text-related properties such as color and font-family commonly inherit, while properties such as borders, margins, padding, widths, and heights normally do not.

Inherited values can be replaced by declarations applied to descendant elements, and the inherit keyword can explicitly request the parent's computed value. Together with the cascade and specificity, inheritance helps explain how browsers determine the final styles displayed on a web page.