CSS Explicit Defaulting: initial, inherit, unset, and revert

Four values to use in CSS

aliceyt
aliceyt
Oct 24 · 4 min read
Source: aliceyt

initial, inherit, unset, and revert values are used to set defaults across properties. While they may look similar, they can result in different behaviors. Let’s go through each one to have a better understanding.


1. Resetting a Property: initial

Each property has an initial value that is in the CSS specifications, as defined in the .

Usage

Resets the property of an element to its initial value. We can think of it as its original value.

Example

The initial value for display is inline.

When elements are given the declaration of display: initial, they are displayed as inline.

Note that the value of inline does not come from the browser. In the example below, we can see that thedisplay: block from the user agent style sheet (which is the browser’s default style sheet) has been overridden.


2. Explicit Inheritance: inherit

An element can inherit CSS styles from its parent elements through inheritance. Some properties (inherited properties) are inherited by default (e.g., font-family)while others have to be explicitly declared.

Usage

Passes property value from parent element to child elements.

Example

Border is not an inherited property.

When we declare border: inherit on the child element, it inherits the border styles from parent.


3. Erasing All Declarations: unset

The declared values of an element’s property can be removed with unset.

Usage

Removes declared values of an element’s property. When removed, the property value will take on either

  • the inherit value (if it is an inherited property) or
  • the initial value as per specification.

Example

Color is an inherited property while display is not.

When we apply color: green on a parent element, the child elements will inherit the color.

If we apply color: unset on the aforementioned child elements, the color of the text remains green since it now takes on the inherit value.

As for the display property, when we apply display: unset, we are effectively setting its value to initial, which is inline based on CSS specification.


4. Rolling Back the Cascade: revert

The last value is revert, and we can use it to roll back the values of the element’s property to:

  • its inherited value (if it is an inherited property) or
  • the defaulted value of the browser.

Example

Color is an inherited property while display is not.

As before, when we set color: green on a parent element, the child elements inherit the color styles. When we apply color: revert on the aforementioned child elements, the color of the text remains green as the value is now rolled back to inherit. This is similar to color: unset.

For display property, applying display: revert gives us a different outcome from display: unset. The elements are now block elements instead of inline elements as we are rolling back to the defaulted value of the browser’s stylesheet.


I hope by now you have a better understanding of these values. They can be useful when you want to specify a particular defaulting behavior. However, do check the browser support before using them.

One last note — if you want to reset all your CSS properties excluding direction, unicode-bidi and custom properties, the quickest way to do it is to use the shorthand property all,e.g., all: initial.


Browser Support


Better Programming

Advice for programmers.

aliceyt

Written by

aliceyt

Read to write and 📝 to 📖 || Articles are organised by category on https://github.com/tiffam/medium_articles

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade