Day 63: explicit defaulting with inherit, initial, unset, and revert

posted on 21.12.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

There are several CSS-wide property values you can use to specify a particular defaulting behavior for a property explicitly.

Okay, okay, I know, these keywords aren't new at all, except for revert maybe which is newish, but if I want to write about revert-layer, which is brand new, I need a basic understanding of all keywords. Also, I had the feeling that most of you, like me, don't know what all of these keywords do, and I was right. At least, if you want to trust this poll on Mastodon.

Our baseline

We'll work with the following example. We have a <div> with a 1px solid green border, a red text color, and a 10px margin. Nested in the div is a <h2> with a blue text color.

<div>
  <h2>standard</h2>
</div>

div {
  color: red;
  border: 1px solid green;
  margin: 10px;
}

h2 {
 color: blue;
}

Now, let's apply keywords to the border, color, and margin property on the <h2> and see what happens.

inherit

h2 {
  border: inherit;
  color: inherit;
  margin: inherit;
}

inherit is pretty straight-forward. The <h2> inherits all defined properties from its parent element.

initial

h2 {
  border: initial;
  color: initial;
  margin: initial;
}

initial sets the value of the property to its initial value. Each property has an initial value, defined in the property’s definition table. For example, if you look at the color property in the specification, you see that the defined initial value in the definition table is CanvasText.
The initial value is not the default value of the property defined in the user agent (browser). For example, the default margin of the body in most (all?) browsers is 8px, but the initial value of the margin property is 0.

unset

h2 {
  border: unset;
  color: unset;
  margin: unset;
}

unset resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In our example, it inherits the color from the parent <div> and sets the border and margin to its initial value.

revert

h2 {
  border: revert;
  color: revert;
  margin: revert;
}

revert resets a property to its inherited value if the property naturally inherits from its parent. In our example, it inherits the color from the parent <div>. If the property is not an inheritable property, revert rolls back the cascaded value to a previous level. If there are user-agent or user default styles, it sets the property to the default value. In our example, it sets the margin of the <h2> to its user-agent default value of 0.83em. If there are no default styles, it sets the value to its initial value. This applies to the border properties in our example.

See on CodePen

Further reading

• 3.2. Foreground Color: the color property
• 6.2. System Colors
• border-width
• border-style
• border-color
• 15.2 The CSS user agent style sheet and presentational hints

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS