CSS all

The all property in CSS is a shorthand property used to reset all inheritable and non-inheritable properties to their initial, inherited, or unset values. It can be particularly useful when you want to quickly remove all styles applied to an element or revert to default styling.

Syntax of all

</>
Copy
all: initial | inherit | unset;

Values

ValueDescription
initialResets all properties to their initial values as defined in the CSS specification.
inheritInherits all properties from the parent element.
unsetResets inheritable properties to inherit and non-inheritable properties to initial.

Default Value

There is no default value for the all property. It must be explicitly defined.

Examples for all Property

Using the CSS all Property

The following examples demonstrate how the all property can be used to reset or control styles effectively.

</>
Copy
/* Reset all properties of an element to their initial values */
.reset {
  all: initial;
}

/* Inherit all properties from the parent element */
.inherit {
  all: inherit;
}

/* Reset inheritable properties to inherit, and others to initial */
.unset {
  all: unset;
}

Example 1: Resetting Styles with all

The following example shows how all property can be used to modify styles on a specific element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    color: blue;
    margin: 20px;
  }

  #example_1 {
    background-color: yellow;
    color: red;
  }

  #example_2 {
    background-color: yellow;
    color: red;
    all: inherit;
  }

  #example_3 {
    background-color: yellow;
    color: red;
    all: initial;
  }

  #example_4 {
    background-color: yellow;
    color: red;
    all: unset;
  }
</style>
</head>
<body>

  <p id="example_1">This is example 1.</p>
  <p id="example_2">This is example 2 for inherit.</p>
  <p id="example_3">This is example 3 for initial.</p>
  <p id="example_4">This is example 4 for unset.</p>
  
</body>
</html>

Explanation of #example_ in terms of the all property:

  1. #example_1:
    • The element has explicitly defined styles: background-color: yellow; and color: red;.
    • The all property is not applied, so these styles are directly applied to the element.
    • The result is a yellow background with red text.
  2. #example_2:
    • The all: inherit; property is applied, which forces the element to inherit all applicable styles (e.g., color, background-color) from its parent element (body in this case).
    • Since the parent styles are color: blue; and no background-color is defined, the text color becomes blue, and the default background-color of the element is removed.
    • The result is blue text with no explicit background color (transparent).
  3. #example_3:
    • The all: initial; property is applied, which resets all styles of the element to their initial values as defined by the CSS specification.
    • Both background-color and color revert to their initial values: transparent for background-color and black for color.
    • The result is black text with a transparent background.
  4. #example_4:
    • The all: unset; property is applied, which resets each property to either its inherited value (if it is naturally inheritable, like color) or its initial value (if it is not naturally inheritable, like background-color).
    • For color, the value is inherited from the parent, resulting in blue text. For background-color, the value resets to transparent.
    • The result is blue text with a transparent background.

Browser Support

The all property is supported in most modern browsers. Below is a compatibility table:

BrowserVersion
Chrome37.0
Edge79.0
Firefox27.0
Safari9.1
Opera24.0