An Overview of CSS Inheritance

How CSS inheritance works in web documents

Man working on two computers with CSS HTML code on the screen

Maskot ​/ Getty Images

An important part of styling a website with CSS is understanding the concept of inheritance. 

CSS inheritance is automatically defined by the style of the property being used. When you look up the style property background-color, you'll see a section titled "Inheritance." If you're like most web designers, you've ignored that section, but it does serve a purpose.

What Is CSS Inheritance?

Each element in an HTML document is part of a tree and every element except the initial <html> element has a parent element that encloses it. Whatever styles are applied to that parent element can be applied to the elements enclosed in it if the properties are ones that can be inherited.

For example, this HTML code below has an <h1> tag enclosing an <em> tag:

<h1>Hello <em>Lifewire</em></h1>

The <em> element is a child of the <h1> element, and any styles on the <h1> that are inherited will be passed on to the <em> text as well. For example:

<style>
h1 {
font-size: 2.5rem;
}
</style>

Since the font-size property is inherited, the text that says "Lifewire" (which is what is enclosed inside the <em> tags) will be the same size as the rest of the <h1>. This is because it inherits the value set in the CSS property.

How to Use CSS Inheritance

The easiest way to use it is to become familiar with the CSS properties that are and are not inherited. If the property is inherited, then you know that the value will remain the same for every child element in the document.

The best way to use this is to set your basic styles on a very high-level element, like the <body>. If you set your font-family on the body property, then, thanks to inheritance, the entire document will keep that same font-family. This will actually make for smaller stylesheets that are easier to manage because there are fewer overall styles. For example:

body {
font-family: sans-serif;
color: #121212;
font-size: 1.rem;
text-align: left;
}

h1, h2, h3, h4, h5 {
font-weight: bold;
font-family: serif;
text-align: center;
}

h1 {
font-size: 2.5rem;
}

h2 {
font-size: 2rem;
}

h3 {
font-size: 1.75rem;
}

h4, h5 {
font-size: 1.25rem;
}

p.callout {
font-weight: bold;
text-align: center;
}

a {
color: #00F;
text-decoration: none;
}

Use the Inherit Style Value

Every CSS property includes the value "inherit" as a possible option. This tells the web browser, that even if the property would not normally be inherited, it should have the same value as the parent. If you set a style such as a margin that is not inherited, you can use the inherit value on subsequent properties to give them the same margin as the parent. For example:

<style>
    .outer-div {
        background: #00F;
        height: 20rem;
        width: 100%;
        margin: 5rem auto;
    }
    .inner-div {
         background: #F00;
         height: 10rem;
         width: 75%;
      margin: inherit;
}
</style>
<div class="outer-div">
<div class="inner-div">
</div>
</div>

Inheritance Uses Computed Values

This is important for inherited values like font sizes that use lengths. A computed value is a value that is relative to some other value on the web page.

If you set a font-size of 1em on your <body> element, your entire page will not be all only 1em in size. This is because elements like headings (<h1>-<h6>) and other elements (some browsers compute table properties differently) have a relative size in the web browser. In the absence of other font-size information, the web browser will always make an <h1> headline the largest text on the page, followed by <h2> and so on. When you set your <body> element to a specific font size, then that is used as the "average" font size, and the headline elements are computed from that.

<style>
body {
font-size: 1em;
}
h1 {
font-size: 2.25em;
}
.much-larger {
font-size: 1.25em;
}
</style>
<h1>Hello <em class="much-larger">Lifewire</em></h1>

Take a look at the example. The base size is set at 1em. This is roughly 16px on most browsers. Then, the <h1> is set to 2.25em. Since the base is 1em, which is usually the default anyway, the <h1> is calculated at 2.25 times that value, roughly 16px. That makes the <h1> about 36px.

Now, you might expect that the <em> element will turn out smaller. It's only defined at 1.25em. That's not the case, though. Because <em> is a child of <h1>, the font size is computed at 1.25 times the <h1> value. So, the text inside the <em> tag will come out at about 45px.

A Note About Inheritance and Background Properties

There are a number of styles that are listed as not inherited in CSS on the W3C, but the web browsers still inherit the values. For example, if you wrote the following HTML and CSS:

<style>
h1 {
background-color: yellow;
}
</style>
<h1><em>Big</em> Heading</h1>

The word "Big" would still have a yellow background, even though the background-color property is not supposed to be inherited. This is because the initial value of a background property is "transparent". So you're not seeing the background color on the <em> but rather that color is shining through from the <h1> parent.