Web Development: Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert)

Tuesday, November 26, 2019

Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert)

Relationships exist in HTML, and these relationships make it possible for us to select and style the elements of a web page. When an HTML element is nested within another, the outer element is known as the parent, while the inner element is the child.

<div>
    <h>Heading</h>
    <span>I am a span</span>
    <p>This is a paragraph</p>
</div>

A child element can itself become parent to another element.

inheritance is important — Inheritance, cleverly demonstrated using human beings

Why all this preamble and backstory? Because it’s important!

When you style a parent element, in some cases the style will be inherited by its children elements. I say some cases because this kind of inheritance doesn’t always hold true.

The Importance of CSS Inheritance

If you have ever styled the contents of a web page, it’s quite possible that you didn’t write a font style for every element that had to display text. It is possible that you only added your font styles to the body element, for example:

<body>
    <div>
    <h2>A h2 element</h2>
    <p>A paragraph</p>
    <div>
      <p>Another paragraph</p>  
    </div>
  </div>
  <div>
    <h3>A h3 element</h3>
  </div>
</body>

If you want a uniform font style for all this content, you only have to style the body element:

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

This is possible because of inheritance across HTML elements. And it’s helpful, as we don’t have to repeat the same font style for the divs and headings. The same applies to color styles, which when applied to a parent element will be applied to the children of that parent unless a different color style gets applied to the children elements.

While inheritance makes things easy for us, things wouldn’t be so easy if all CSS properties behaved in this way.

Here is another example:

<ul class="main-list">
  <li>Dairy</li>
  <li>Vegetable</li>
  <li class="sub-list">
    Fruit
    <ul>
      <li>
        Drupe
        <ul>
          <li>Peach</li>
          <li>Coconut</li>
          <li>Olive
        </ul>
      </li>
      <li>
        Berry
        <ul>
          <li>Tomato</li>
          <li>Cucumber</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Who knew cucumbers were berries?! We’ll implement a few styles to the parent list and see what gets inherited down the bloodline:

The font and color styles that were applied to the unordered list are inherited by its children elements and even its grandchildren elements. However, this is not the case with the border styles.

So which other properties are inherited?

A Complete List of Inherited Properties

According to the W3C, here are the properties that can be inherited.

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

You can find more about this list on the W3C’s website (you definitely do not need to memorize all of these!).

How to Force Properties to Inherit

Since some properties cannot be inherited, you might think that the way out is to apply them to the children elements as well. The styles we used above might look like this:

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana
}

.sub-list {
  border: 1rem solid #000;
}

We’d still only have border styles on the parent list and the first sub-list. But the issue is that we’ve had to repeat ourselves. The pain of copying the same style over and over becomes evident.

A good solution would be one where you only need to apply the style once, preferably on the parent, and do a little tweak on the child to inherit. This will keep everything dry and clean.

The Inherit Keyword

According to the MDN Docs:

“The inherit CSS keyword causes the element for which it is specified to take the computed property of the property from its parent element.” – MDN

In other words, it’s a way of stating that the value of a particular property should be obtained from the element’s parent. This keyword can be used on any CSS property.

Going back to our example, here is how the style would appear:

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
}

.sub-list {
  border: inherit;
}

With that, the result will look like this:

So, should our border styles ever need to change, we’d only need to change them in one place.

How to Force Properties Not to Inherit

While it’s possible to enforce inheritance on properties that are not inheritable by default, in some cases it might make sense not to do so. An alternative is to make use of the property’s initial values.

The Initial Keyword

You can set the default or initial value of a CSS property by using the initial CSS keyword. This will cause the inherited value of the property to go back to its initial value.

In this example there are a couple of things happening. We have two div elements whose red color properties are inherited by the h1 and p elements nested within. However, we also apply a global h1 style (blue color) but we make sure the second h1 doesn’t inherit either style in the following way:

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: initial;
}

Our h1 in the .berries block goes back to whatever color the browser originally applied. Here’s what that looks like:

Other CSS Inheritance Keywords

In addition to the inherit and initial keywords, we can also use revert and unset. In fact, these alternatives are actually recommended because initial can produce some unexpected results.

The Unset Keyword

The unset keyword is subtly different. It resets an element’s value to the inherited value (if it inherited) and to its initial value if not. Here’s our example again:

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: unset;
}

In this case, the color property of our second h1 reverts to its inherited value (red) instead of its initial value (black):

The Revert Keyword

Lastly, we have the revert keyword, which works similarly to unset in most cases. It resets the property to its inherited value (if it inherits from its parent), or to the default value established by the user’s own stylesheet (if it exists), or then the browser’s styles.

Conclusion

When a style rule is declared in a stylesheet there are lots of places where the value of the property could come from;

The stylesheet defined by the web author.
User-defined styles.
Browser defined styles.

Where the styles are fetched from depends on how the property works in regards to inheritance. If the property is inheritable, then its value will come from its parent which will be declared in the stylesheet created by the web author. Else it will come from either the second, or third source.

Inheritance in CSS can be a little confusing! I hope this tutorial helped you make sense of it.