CSS all Property
Tags: learncss
Published: 2021-02-13 10:12:53

---
title: CSS all Property
published: true
date: 2021-02-12 09:45:41 UTC
tags: LearnCSS
canonical_url: https://sharepointanchor.com/learn-css/css-all-property/
---

The <abbr title="Cascading Style Sheets">CSS</abbr> **all property** will **reset all the properties** of the selected [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") element. This is a shorthand property because it can control the values of [CSS](https://sharepointanchor.com/category/learn-css/ "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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_0rFP3qCGge.png)<figcaption>all property with initial value</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/dhnmujkb/embed/html,result/"></script>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_oSIBWbDbYe.png)<figcaption>all property with inherit value</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_cOrl6DJRpH.png)<figcaption>all property with unset value</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_1IqRk02iiy.png)<figcaption>all property with revert value</figcaption>

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_0gWDPtPWf1.png)<figcaption>Browser Support</figcaption>

The post [CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).