The CSS all property will reset all the properties of the selected HTML element. This is a shorthand property because it can control the values of CSS properties.
- All property accepts the following values
- initial
- inherit
- unset
- revert
Syntax:
all: initial | inherit | unset | revert;
Values:
| Value | Description |
|---|---|
| initial | It makes the property use its default value. |
| inherit | This property will inherit the property from its parent elements. |
| unset | It can change all the properties applied to the element to its initial value. |
| revert | This property specifies the behavior that depends on the stylesheet origin to which the declaration belongs. |
All property with “initial” value:
In the following code, we have declared initial property with initial value.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #DBFD71;
color: #000000;
all: initial;
}
</style>
</head>
<body>
<h2>All property example</h2>
<p>Here the all: initial; is set.</p>
<div class=" example"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words that don't look even slightly believable. </div>
</body>
</html>
Result:
The following image has shown the result of the above code.
All property with “inherit” value:
In the below code, we used all property with inherit value for your reference.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #DBFD71;
color: #000000;
all: initial;
}
</style>
</head>
<body>
<h2>All property example</h2>
<p>Here the all: inherit; is set.</p>
<div class=" example"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words that don't look even slightly believable. </div>
</body>
</html>
Result:
The below screenshot has shown the output of the above given code.
All property with “unset” value:
In this following code, we use all property with the value unset.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #DBFD71;
color: #000000;
all: initial;
}
</style>
</head>
<body>
<h2>All property example</h2>
<p>Here the all: unset; is set.</p>
<div class=" example"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words that don't look even slightly believable. </div>
</body>
</html>
Result:
Let’s see the result of the above code.
All property with “revert” value:
For example, we have used the CSS property with revert value in the below code section.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #DBFD71;
color: #000000;
all: initial;
}
</style>
</head>
<body>
<h2>All property example</h2>
<p>Here the all: revert; is set.</p>
<div class=" example"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words that don't look even slightly believable. </div>
</body>
</html>
Result:
In this example, we have seen the output of the above code.
Browser Support:
The post CSS all Property appeared first on Share Point Anchor.
Top comments (0)