CSS all Property

In CSS, the all property is a shorthand property that is used to set all the element's values to their original or inherited values, or in certain situations, to another spreadsheet origin. This property is used to clear all CSS properties from a document.

Syntax

all: initial | inherit | unset;

Example

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
    background-color: #00ab55;
    color: #ffffff;
}
.ex2 {
    background-color: #ff4842;
    color: #ffffff;
    display: inline;
    all: inherit;
}
.ex3 {
    background-color: #ffc107;
    color: #ffffff;
    all: initial;
}
.ex4 {
    background-color: #1890FF;
    color: #ffffff;
    all: unset;
}
</style>
</head>
<body>

<p>No all property: <span class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>

<p>all: inherit: <span class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>

<p>all: initial: <span class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>

<p>all: unset: <span class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>

</body>
</html>

Preview

Property Values

Value	Description
initial	This parameter is used to establish the default value for all properties.
inherit	This parameter is used to establish the default value for all properties.
unset	This option specifies the default value for all attributes. If they are only inheritable, or if they are not, they will revert to their initial value.
revert	Specifies behavior that is dependent on the origin of the stylesheet to which the declaration belongs:

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
all	37.0	27.0	9.0	79.0	24.0

align-self

animation

CSS all Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us