CSS - revert

The CSS keyword revert is used to reset a property to its original value before any changes have been made by the current style origin.

  • This means that it can be reverted to the value set by the user agent, the value set by the user, the inherited value (if inheritable) or the original value.

  • It is applicable to any CSS property, including shorthand properties such as all.

This keyword removes all styles that have been overridden from the cascade, until the style that is being reverted to is reached.

  • If the keyword revert is used in a site's custom styles (author origin), the cascaded value of the property is reverted to the user's custom style, if available; otherwise, the style is reverted to the user agent's default style.

  • If the style is used in a user's custom style sheet or if the style is applied by the user (origin of the user), the keyword revert resets the cascaded value to the default style of the user agent.

  • When the keyword revert is used in the standard styles of the user agent, it has the same function as unset.

The keyword revert works similarly to unset in most cases, with the exception of properties whose values have been set by the browser or user-created custom stylesheets on the browser page.

CSS revert - Basic Example

  • In the following example, the CSS keyword revert is applied to the text color within the .revert-example class, causing the text to inherit its color from the parent element (.container).

  • Therefore, the text reverts to the default color specified by the body element, showcasing the utility of the revert keyword for flexible styling.

 
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
   }
   .container {
      background-color: #ddebed;
      padding: 20px;
      border: 1px solid #ddd;
   }
   .custom-text {
      color: red;
   }
   .revert-element {
      color: revert;
   }
</style>
</head>
<body>
<div class="container">
   <h1>Original Styling</h1>
   <p class="custom-text">This text has a custom red color.</p>
   <h1>Revert Example</h1>
   <p class="revert-element">This text inherits the color from its parent, reverting to the default color.</p>
</div>
</body>
</html>
Advertisements