Understanding CSS Initial, Unset, Revert, and Inherit
Initial
Resets a CSS property to the initial/default value as if no CSS rules had been written for that value.
Unset
Resets a CSS property to its inherited value, if it’s a property that can
be inherited, and to the initial/default value otherwise. The difference between
unset
and initial
is that initial
will always reset to the default value, never
to the inherited value, while unset
will still allow for inheritance.
Revert
Resets a CSS property to the value it would have had if no changes had been made
by the current style origin (the browser default styles, styles added by the
user via a plugin, or CSS from the website). Like unset
, it still allows for
inheritance. The difference between revert
and unset
is that if a browser
applies styles to an element, revert
will keep them while unset
will reset
back to the initial value. For example, Firefox (like most browsers) adds a
font-weight: bold
rule to h2
elements. font-weight: revert
on the element
will undo any font-weight changes set by the stylesheet but keeps the bold styling
from the browser. font-weight: initial
also resets the browser’s user-agent styles,
resulting in normal-weight headings.
Inherit
Resets a CSS property to the computed value of that property for its parent. The
difference between initial
and revert
is that the element will still have
styling applied, just whatever value its parent uses. The difference from unset
is that it will allow for inheriting properties that aren’t usually inherited
(e.g. border), while unset
will reset those properties to the initial value;