An Overview of CSS Inheritance

How CSS inheritance works in web documents

Table of Contents

What Is CSS Inheritance?
Use CSS Inheritance
Use the Inherit Style Value
Computed Values
A Note About Inheritance and Background Properties

Science, Tech, Math

By

Jennifer Kyrnin

Updated on March 07, 2020

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

For example, this HTML code below has an

tag enclosing an tag:

Hello Lifewire

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

Since the font-size property is inherited, the text that says "Lifewire" (which is what is enclosed inside the tags) will be the same size as the rest of the
. 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
. If you set your font-family

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:

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
element, your entire page will not be all only 1em in size. This is because elements like headings ( - ) 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 headline the largest text on the page, followed by and so on. When you set your

Hello Lifewire

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

Now, you might expect that the element will turn out smaller. It's only defined at 1.25em. That's not the case, though. Because is a child of
, the font size is computed at 1.25 times the value. So, the text inside the 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:

Big Heading

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 but rather that color is shining through from the
parent.

Format
mla apa chicago
Your Citation

Kyrnin, Jennifer. "An Overview of CSS Inheritance." ThoughtCo, Sep. 30, 2021, thoughtco.com/css-inheritance-overview-3466210. Kyrnin, Jennifer. (2021, September 30). An Overview of CSS Inheritance. Retrieved from https://www.thoughtco.com/css-inheritance-overview-3466210 Kyrnin, Jennifer. "An Overview of CSS Inheritance." ThoughtCo. https://www.thoughtco.com/css-inheritance-overview-3466210 (accessed June 3, 2023).