Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS all Property
The CSS all property is a shorthand property that resets all CSS properties to their initial, inherited, or unset values. It provides a convenient way to clear all styling from an element and start with a clean slate.
Syntax
selector {
all: value;
}
Possible Values
| Value | Description |
|---|---|
initial |
Resets all properties to their initial values |
inherit |
Sets all properties to inherit from parent element |
unset |
Resets properties to inherit if inheritable, otherwise to initial |
revert |
Resets properties to browser default values |
Example: Using all: inherit
The following example demonstrates how all: inherit forces an element to inherit all properties from its parent −
<!DOCTYPE html>
<html>
<head>
<style>
html {
color: blue;
font-size: 18px;
}
#demo {
background-color: yellow;
color: red;
font-size: 24px;
padding: 10px;
all: inherit;
}
</style>
</head>
<body>
<h2>CSS all property</h2>
<div id="demo">This text inherits all properties from parent.</div>
</body>
</html>
The div text appears in blue color (inherited from html element) instead of red, with 18px font size instead of 24px. The yellow background and padding are removed due to inheritance.
Example: Using all: initial
This example shows how all: initial resets all properties to their default values −
<!DOCTYPE html>
<html>
<head>
<style>
.styled-div {
background-color: lightcoral;
color: white;
padding: 20px;
border: 2px solid black;
font-weight: bold;
}
.reset-div {
background-color: lightcoral;
color: white;
padding: 20px;
border: 2px solid black;
font-weight: bold;
all: initial;
display: block;
}
</style>
</head>
<body>
<div class="styled-div">Styled div with properties</div>
<div class="reset-div">Reset div with all: initial</div>
</body>
</html>
The first div appears with coral background, white text, padding, and bold font. The second div appears with no background, default black text, no padding, and normal font weight due to the reset.
Conclusion
The all property is a powerful tool for resetting element styles. Use inherit to adopt parent styles, initial for browser defaults, or unset for intelligent resetting based on property inheritance behavior.
Updated on: 2026-03-15T13:16:48+05:30
201 Views
Advertisements