CSS Style Inheritance

You want the whole page about the pharaohs' dynasty to use the Georgia font and dark brown text. You could write the same two declarations separately for headings, paragraphs, lists and links... or once, for body. The second way works thanks to inheritance.

Style inheritance in CSS (Cascading Style Sheets) is a mechanism that allows passing style property values from parent elements to child elements in the DOM (Document Object Model) tree. Thanks to inheritance, we can create a consistent appearance for a web page by applying property values defined at higher levels of the element hierarchy. It works like a dynasty: a pharaoh passes the title and power to his heir, but every pharaoh gets his own robes.

Inheritance is particularly useful for properties that are inherited by default. This means that the values of these properties applied to a parent element will be automatically inherited by child elements, unless they are overridden in style rules for those elements. Examples of inherited properties include: color (text color), font-family (font family), font-size (font size), and line-height (line height).

However, not all properties are inherited. Some properties, such as background-color (background color), border (border), and padding (inner spacing), are not automatically inherited. For these properties, we must explicitly specify values for child elements.

What Is Inherited and What Isn't?

A simple rule: text properties are inherited, box properties are not.

If borders were inherited, every paragraph in a bordered section would get its own border, and every link in a paragraph yet another one. That's why box properties stay with the element you gave them to.

Style inheritance gives us the ability to create a consistent and harmonious appearance for a web page. We can define general styles at the parent element level and be sure they will be inherited by child elements, which makes it easier to maintain a uniform look across the entire page. At the same time, thanks to the ability to override inherited values, we can customize the appearance of individual elements to achieve the desired visual effects.

An Example with body

To understand how CSS style inheritance works, consider the following example:

<body>
  <h1>Inheritance Example</h1>
  <p>Paragraph with inherited color and font family, but with its own font size.</p>
</body>

body {
  font-family: Arial, sans-serif;
  color: blue;
}
p {
  font-size: 20px;
}

In the example above, the <body> element has font-family and color styles defined. Because these properties are inherited, child elements like <h1> and <p> also adopt the same values for these properties. These values will apply as long as they are not overridden by other styles defined directly for those elements.

For the <p> element, the font-size value was defined directly, so it does not use the inherited value from the parent element.

Where Does This Color Come From? Ask DevTools

When an element has a style you didn't write in its own rule, inspect it in the developer tools (F12). In the Styles panel, below the element's own rules, you'll find sections such as "Inherited from body" or "Inherited from div" - those are styles inherited from ancestors. Properties that are not inherited are greyed out there.

The inherit and initial Keywords

If you want to force inheritance of a property that isn't inherited by default, use the inherit keyword. For example:

div {
  border: 2px solid gold;
}

p {
  border: inherit;
}

A paragraph inside the <div> will take its gold border, even though border is not inherited by default. Inherited properties, such as font-size, don't need inherit - they pass to the children on their own.

It also works the other way round: the initial keyword gives a property back its initial value from the CSS specification, cutting the element off from what it inherited. For example, color: initial usually gives black text, even if the parent is blue.

Practice

In the editor below, the color and the font are set only on the .papyrus section, yet every paragraph has them. Change the color in the .papyrus rule and watch the whole text change. Then remove the border: inherit declaration from the .quote rule - the paragraph's border will disappear, because border is not inherited:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Style inheritance</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="papyrus">
    <h2>The Book of the Dead</h2>
    <p>This paragraph has no rules of its own, yet it has the color and font of the section.</p>
    <p class="quote">This paragraph got a border thanks to <code>border: inherit</code>.</p>
  </section>
</body>
</html>

Remember: inheritance is passing power down a dynasty - a parent hands the color and the font to its children, but every element has to get its own borders, backgrounds and spacing.