Understanding CSS Inheritance

Some properties in CSS can actually inherit their value from a closest parent. What that means is, for example, I have this H1 element and I want to give it a color of red. To do so, we already know that we can head over to my CSS file, select our H1 element, and just give it a color of red. When I save, we see our H1 is now red.

<!-- index.html -->
<h1>Hello World</h1>

<!-- index.html -->
<h1>Hello World</h1>

/* style.css */
h1 {
  color: red;
}

/* style.css */
h1 {
  color: red;
}

This works fine, but the color property, it turns out, can actually inherit its value from the nearest parent defining a color property. So instead of an H1 ruleset, I'll remove it. And what I can do instead is select any of the elements that are a parent to our H1 element and give that element the color of red. In my index.html, we see the only parent to our H1 element is the body element. So back in my CSS, instead of selecting the H1 element, if I instead selected its parent, the body element and gave it a color of red and save. We see despite having selected the body element rather than the H1 directly, our H1 is red.

<!-- index.html -->
<body>
  <h1>Hello World</h1>
</body>

<!-- index.html -->
<body>
  <h1>Hello World</h1>
</body>

/* style.css */
body {
  color: red;
}

/* style.css */
body {
  color: red;
}

The reason our H1 has a color of red, despite the fact that I gave the color to our body element is because the color property is an inheritable property. It inherits its value from the nearest parent, defining a color property.

Back in my index.html, I'll wrap a div around our H1 element.

<!-- index.html -->
<body>
  <div>
    <h1>Hello World</h1>
  </div>
</body>

<!-- index.html -->
<body>
  <div>
    <h1>Hello World</h1>
  </div>
</body>

And when I save, we see our H1 element is still inheriting its color from the body element. In reality, since our H1 doesn't have a color property, it inherits it from its nearest parent, the div. But since the div also doesn't have a color property, our div inherits it from its nearest parent, the body element. The body does have a color property. So it delegates it down the chain like a waterfall all the way down to the youngest child, our H1 element.

In my CSS, I'll select our div and give it a color of purple.

/* style.css */
body {
  color: red;
}

div {
  color: purple;
}

/* style.css */
body {
  color: red;
}

div {
  color: purple;
}

When I save, we see our H1 is now purple. This is because inheritable properties inherit from their nearest parent. And so with this div being a closer parent to our H1 than the body element is, our H1 inherits its color from it.

Inheritable vs. Non-Inheritable Properties

Now, not all properties are inheritable properties. On the MDN website, on the color property documentation page, we see the color property has inherited set to yes. But on the MDN documentation page for the border property, we see the border property is not an inheritable property.

Back in my CSS, I'll give a border to my div element of 5 pixels solid black.

/* style.css */
body {
  color: red;
}

div {
  color: purple;
  border: 5px solid black;
}

/* style.css */
body {
  color: red;
}

div {
  color: purple;
  border: 5px solid black;
}

When I save, we see our div now has a border around it, but our H1 doesn't. And this is because the border property isn't an inheritable property. But what we can do is select our H1 element, give it a border property, but for its value, I can use the inherit keyword, which will make our non-inheritable property inherit from its parent.

/* style.css */
body {
  color: red;
}

div {
  color: purple;
  border: 5px solid black;
}

h1 {
  border: inherit;
}

/* style.css */
body {
  color: red;
}

div {
  color: purple;
  border: 5px solid black;
}

h1 {
  border: inherit;
}

And when I save, we see now that we made the border property inheritable on our H1.