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