CSS - initial vs. inherit vs. unset

inherit
The property value is inherited from its parent element.
initial
The property value is set to its default value (as defined in the definition table for the property in the CSS specification).
If applied to inherited properties, the initial value may be unexpected.
unset
Behaves as either inherit or initial depending on the property type.
If the property type is inherited, then unset behaves like inherit.
If the property type is not inherited, then unset behaves like initial.

An example

The standard font-family for the pre element (as defined in the user agent stylesheet) is monospace, but we can use the CSS property values initial and inherit to change the font-family property without having to specify a font family by name.

<pre>
  Fee-fi-fo-fum, I smell the blood of an Englishman.
</pre>
Fee-fi-fo-fum, I smell the blood of an Englishman.

monospace (Courier New)

Inherit

The pre block will inherit font-family from the first ancestor element with a font-family property. In this case, the font-family for the page is Arial.

pre {
  font-family: inherit;
}
Fee-fi-fo-fum, I smell the blood of an Englishman.

Arial (page default)

Initial

The pre block will set the default font-family for the browser (Usually 'Times New Roman' for the desktop). Will vary by browser.

pre {
  font-family: initial;
}
Fee-fi-fo-fum, I smell the blood of an Englishman.

Times New Roman (browser dependant)

Unset

If we have a general rule that sets the color of pre text to red for example, then we can reset it back to it's initial value using unset.

pre {
  color: red;
}
Fee-fi-fo-fum, I smell the blood of an Englishman.

monospace, red

.my-class pre {
  color: unset;
}
Fee-fi-fo-fum, I smell the blood of an Englishman.

monospace, black


Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath