DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS all Property

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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

The following image has shown the result of the above code.

all property with initial value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

The below screenshot has shown the output of the above given code.

all property with inherit value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

Let’s see the result of the above code.

all property with unset value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

In this example, we have seen the output of the above code.

all property with revert value

Browser Support:

Browser Support

The post CSS all Property appeared first on Share Point Anchor.

Top comments (0)