CSS
Controlling inheritance

Controlling inheritance

CSS provides five special universal property values for controlling inheritance. Every CSS property accepts these values.

  • inherit
  • initial
  • revert
  • revert-layer
  • unset

revert

The revert keyword works exactly the same as unset (opens in a new tab) in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

The revert keyword is different from and should not be confused with the initial (opens in a new tab) keyword, which uses the initial value (opens in a new tab) defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

For example, the initial value (opens in a new tab) for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <table>s to table, etc.

unset

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value (opens in a new tab) if not. In other words, it behaves like the inherit (opens in a new tab) keyword in the first case, when the property is an inherited property (opens in a new tab), and like the initial (opens in a new tab) keyword in the second case, when the property is a non-inherited property (opens in a new tab).

References