CSS all Property

Definition and Usage

The all property sets every CSS property on an element to one keyword. Use it to wipe an element's own styles, or to make it take its styles from the parent.

It does not change direction, unicode-bidi, or custom properties. A property written after all is kept. The property is not inherited.

CSS Syntax

Property Values

How to Use all

Give the element a style you can see, then replace all of it with one keyword.

1. Set a parent color so inheritance has something to copy.
2. Set a different color and background-color on the element.
3. Add all with one keyword: initial, inherit, unset, or revert.
4. Put any property you still want after all. A property written before it is wiped.

Live Preview

Both lines start red on a light blue background. The parent text is blue. Only the second line uses all.

CSS Examples

Each snippet paints a paragraph, then lets all replace those styles. Use Try It Yourself for a live editor.

<style>
  article {
    color: blue;
  }
  p {
    color: red;
    background-color: skyblue;
  }
  .reset {
    all: initial;
  }
</style>

<article>
  <p>Kept</p>
  <p class="reset">Reset</p>
</article>

<style>
  article {
    color: blue;
    background-color: #eee;
  }
  p {
    color: red;
    background-color: skyblue;
  }
  .copy {
    all: inherit;
  }
</style>

<article>
  <p>Kept</p>
  <p class="copy">Copied</p>
</article>

<style>
  article {
    color: blue;
    font-size: 14px;
  }
  p {
    color: red;
    background-color: skyblue;
    font-size: 24px;
  }
  .mix {
    all: unset;
  }
</style>

<article>
  <p>Kept</p>
  <p class="mix">Mixed</p>
</article>

Key Takeaways