Open In App
Related Articles

CSS all Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The all property in CSS is the shorthand property that is used to set all the element’s values to their initial or inherited values or in some cases used to set the values to another spreadsheet origin. This property is used to reset all the CSS property in a document.

Syntax: 

all: initial|inherit|unset|revert|revert-layer;

Default Value : Its default value is none.

Property Values: 

  • initial: This property is used to set all property to its default value. 
  • Inherit: This property is used to set all property to its inherited value.
  • unset: Indicates that all of the element’s attributes should be updated to either their original values if they inherit by default or to their initial values if not.
  • revert: Undo or restore the previous state or value of a property or setting.
  • revert-layer: Reverse the modifications made to a specific layer, restoring it to its previous state or configuration within a software or system.

Example: In this example, we are using all: initial property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS all property
    </title>
 
    <!-- CSS all property -->
    <style>
        h1,
        h3 {
            background-color: yellow;
            color: green;
            all: initial;
        }
 
        body {
            text-align: center;
            all: initial;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>all property</h3>
</body>
</html>

                    

Output: 

GeeksforGeeks all property

Example: In this example, we are using all: inherit property.

html

<!DOCTYPE html>
<html>
<head>
    <title>All Property</title>
    <style>
        div {
            text-align: center;
            color: green;
            all: initial
        }
 
        h1,
        h3 {
            all: inherit;
        }
    </style>
</head>
 
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>all property</h3>
    </div>
</body>
</html>

                    

Output: 

GeeksforGeeks all property

Example: In this example, we are using all: unset property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS all property
    </title>
 
    <style>
        h1,
        h3 {
            background-color: green;
            color: white;
            all: unset;
        }
 
        body {
            text-align: center;
            all: unset;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>all property</h3>
</body>
</html>

                    

Output: 

GeeksforGeeks all property

Example: In this example, we are using all: revert property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS all property
    </title>
 
    <style>
        h1,
        h3 {
            background-color: yellow;
            color: green;
            all: revert;
        }
        body {
            text-align: center;
            all: revert;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>all Property</h3>
</body>
</html>

                    

Output: 

supported browser to run code CSS all property:

  • Chrome 37.0
  • Firefox 27.0
  • Opera 24.0
  • Safari 9.1
  • Microsoft Edge 79.0


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads