CSS - all

The shorthand CSS property all resets all properties of an element, with the exception of unicode bidi, direction and CSS custom properties.

It can reset properties to their original or inherited values or to the values explicitly defined in another cascade layer or in the stylesheet origin.

Constituent Properties

This property serves as a concise representation for all CSS properties, with the exception of unicode bidi, direction and CSS custom properties.

The all property is specified with one of the global CSS keyword values. It is important to note that none of these values impact the unicode bidi and direction properties.

Possible values

The following is the list of possible values of all properties.

  • initial - Indicates that all properties of the element should be reset to their initial values.

  • inherit - Indicates that all properties of the element should be set to their inherited values.

  • unset - Indicates that the element's properties should set to inherited values in case of default inheritance, else to their initial values.

  • revert - Specifies the behavior depending on the stylesheet origin associated with the declaration:

    • If the rule is linked to the author's origin, the revert value reverts the cascade to the user level and recalculates the specified values as if no author-level rules were applied to the element.

      In the context of revert, the author origin includes the override and animation origins.

    • If the rule is part of the user origin, the value revert resets the cascade to the user agent level.

      This means that the specified values are calculated as if no rules were defined at author or user level for the element.

    • If the rule originates from the user agent origin, the value revert behaves similarly to unset.

  • revert-layer - Specifies the rollback of all properties of the element to a previous cascade layer, if available. This is still in experimental phase.

    If no other cascade layer is available, the properties of the element are reset to the matching rule in the current layer, if available, or to an earlier style origin.

Syntax

all = initial | inherit | unset | revert | revert-layer

CSS all - Basic Example

  • In the following example, the CSS all property is used to completely adjust all styling properties within specific elements.

  • The first <div> with id=custom1 showcases the default styling without the all property, while subsequent <div> elements (custom2, custom3, and custom4) demonstrate the impact of all: inherit;, all: initial;, and all: unset; respectively.

<html>
<head>
<style> 
   html {
      font-size: x-large;
      color: #2c3e50; 
   }
   #custom1 {
      background-color: #ecf0f1;
      color: #e74c3c; 
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
   }
   #custom2 {
      background-color: #ecf0f1; 
      color: #e74c3c; 
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: inherit;
   }
   #custom3 {
      background-color: #ecf0f1;
      color: #e74c3c; 
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: initial;
   }
   #custom4 {
      background-color: #ecf0f1; 
      color: #e74c3c; 
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: unset;
   }
</style>
</head>
<body>
<p>No all property:</p>
<div id="custom1">Hello from a creative and innovative universe!</div>
<p>all: inherit:</p>
<div id="custom2">Discover the virtually endless possibilities in your head.</div>
<p>all: initial:</p>
<div id="custom3">Welcome the start of an interesting new trip.</div>
<p>all: unset:</p>
<div id="custom4">Use the power of new ideas to realize your full potential.</div>
</body>
</html>
Advertisements