revert

The revert CSS keyword rolls back the cascade so that a property takes on the value it would have had if there were no styles in the current style origin (author, user, or user-agent). Thus, it resets the property to the default value established by the user-agent stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand all.

The revert keyword is useful for isolating embedded widgets or components from the styles of the page that contains them, particularly when used with the all property.

In user stylesheets, revert rolls back the cascade and resets the property to the default value established by the user-agent stylesheet.

Example

HTML

<section>
  <p>This is a section!</p>

  <aside class="widget">
    <p>This is a little widget.</p>
  </aside>
</section>

CSS

section {
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
}

.widget {
  all: revert;
}

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Use initial to set a property to its initial value.
• Use unset to set a property to its inherited value if it inherits, or to its initial value if not.
• Use inherit to make an element's property the same as its parent.
• The all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.