CSS - initial vs. inherit vs. unset
![[css3.svg]](/images/logo/css3.svg){kind=logo}
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.
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.
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
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