CSS Global Keywords Explained – inherit, initial, unset, revert and revert-layer

INTRODUCTION

Inheritance allows child elements to automatically receive certain property values from their parent elements without needing to re-declare them. It is an mechanism which decides what happens when no value is defined for an property on an element.

CSS has provided some special universal property values for channeling inheritance. Every property in CSS accepts these values.

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

The Inherit Keyword

The inherit keyword is used to explicitly allow inheritance. In simple terms it forces inheritance of property. The child element takes the computed value of property from parent element.

It can be applied to any CSS property, including non-inherited ones like margin, padding, width, etc. You can explicitly tell any element to copy the value from its parent.

The inherit keyword is used When you want to ensure a child copies the parent’s value. It is Useful for maintaining consistency, theming, or overriding styles that break inheritance.

Example:

div {color: blue;} 

h1 {color: inherit;} 

<div>

 <h1> Sample heading </h1> 

</div>

Explanation: In this example as the value of color property of <h1> element is set to inherit, it will inherit the value from its parent element <div>. So the value of color for <h1> element will be computed to blue.

The Initial Keyword

The initial keyword applies the initial or default value of a property to an element. The initial value is the value assigned to the property in W3C specification defintion. It can be applied to any CSS property.

It should be noted that not all CSS properties have an defined initial value. Some properties have depends on user agent keyword specifed in their definition. For such properties, the value is taken from Browser's default style sheet(user agent here means Browser).

It is useful for resetting styles, especially in complex stylesheets or third-party code or.

Example:

p{ 
  font-weight: initial;
}

Explanation: The initial value of font-weight property is normal. In this example as the value of <p> element is set to initial, it's value will be computed to normal.

The Unset Keyword

The unset keyword removes the applied value of a CSS property and behaves like:

• inherit - If the property is inherited
• initial - If the property is non-inherited

It can be used to reset a property by nullify the effect of any other styles. It can be applied to any CSS property including the CSS shorthand property all.

Example:

<div class="introdution">
 <p> This is Sample Paragraph. </p> 
</div>

.introduction{ 
 color: blue; 
 margin: 10px;     
} 



p { 
 color: unset; 
 margin: unset; 
} 

Explanation: In this example as color is an inherited property, the unset will behave as inherit. The value for color Property will be inherited from its parent element <div> and set to blue.

margin is an non-inherited property. Hence unset will behave as initial. The initial value of margin property is 0px. The value for this Property will be set to its initial value of 0px.

The revert Keyword

The initial keyword is not always useful in every situation. For example, <div> is block level element. The CSS display property has an initial value of inline. If The display property on <div> element is set to initial then we will get inline value for block level element. To solve this problem revert keyword is used.

The revert keyword rolls back a property to the value established by the stylesheet at the previous cascade layer. The CSS cascade order is:

• User agent styles (browser defaults)
• User styles (user's custom stylesheet)
• Author styles (website's CSS)

When you use revert in author styles (your website's CSS), it falls back to user styles if they exist, or to user agent(browser stylesheet) styles if no user styles are present. So if a user has custom styles applied, revert would actually restore those user styles rather than undo them.

As user stylesheets are rarely used, generally the revert keyword resets a property’s value back to the browser's default style, as defined in the user-agent stylesheet (i.e., the default styles applied by browsers).

Example:

.custom-button { 
    background: #e74c3c; 
    color: white; 
    padding: 15px 30px; 
    border: none; 
    border-radius: 5px; 
    font-size: 16px; 
    cursor: pointer; 
}

.reverted-button { 
    background: revert; 
    color: revert; 
    padding: revert; 
    border: revert; 
    border-radius: revert; 
    font-size: revert; 
    cursor: revert; 
}

In this example as the value of color property is inheritable, so the revert keyword will behave as inherit. It will take value from its parent <div> element and the value will be set to blue.

The revert-layer Keyword

revert-layer is a CSS global keyword introduced as part of the Cascade Layers (@layer) feature. It resets a property’s value to what it would have been if the current layer had not set it, but respects all layers beneath it in the cascade.

In other words, revert-layer undoes styles only from the current layer, unlike revert which undoes all author styles and falls back to user-agent or user styles.

How it Works (Conceptually)

CSS cascade now allows layers, which define grouped styles with ordered importance. Each layer can override styles from lower layers. revert-layer allows you to cancel styles in the current layer, and fall back to styles from lower layers, without touching browser or user styles.

@layer base {
  button {
    color: blue;
  }
}

@layer theme {
  button {
    color: red;
  }
}

@layer override {
  button {
    color: revert-layer;
  }
}

Explanation: The base layer sets color: blue; while the theme layer overrides with color: red. The override uses color: revert-layer; so it ignores override's own value and falls back to theme, which gives us color: red.

When to Use revert-layer

• You want to cancel a property in the current layer only.
• You are working with modular CSS layers and want a clean way to remove overrides.
• You need more granular control than revert provides.

Frequently Asked Questions (FAQ)