CSS all Property

What You’ll Learn

The all property is a CSS shorthand that lets you reset or inherit every CSS property on an element with a single declaration. It is especially useful when you need a clean slate or want a child to fully match its parent styling.

Definition and Usage

The all CSS property is a shorthand that resets or sets all of an element’s CSS properties to a single keyword value. Instead of writing many separate reset rules, you can apply all: initial, all: inherit, or all: unset in one line.

This is helpful when embedding third-party content, isolating a component from surrounding styles, or quickly undoing inherited styling on a nested element.

📝 Syntax

Apply all like any other CSS property. The value is always one global keyword:

selector {
  all: initial | inherit | unset | revert | revert-layer;
}

Basic Example

.reset-style {
  all: initial;
}

Syntax Rules

• all accepts global keywords, not individual values like colors or lengths.
• It affects all standard CSS properties except unicode-bidi and direction.
• CSS custom properties (--variables) are not reset by all.
• After using all: initial, you may need to re-add properties like display for layout.
• Use revert or revert-layer in modern browsers when you want browser-default styling instead of spec initial values.

Default Value

Elements do not use the all property by default. Each CSS property keeps its own normal initial or inherited value until you write a rule. You only see the effect of all when you explicitly set it on a selector.

💎 Property Values

These global keywords control how every CSS property on the element is treated.

initial vs inherit vs unset

What Properties Does all Affect?

The all shorthand applies to all CSS properties except:

• unicode-bidi
• direction

It does not remove CSS custom properties you defined with --name. After a reset, you can still reference variables from ancestor elements unless you override them separately.

Examples Gallery

Try all with initial, inherit, unset, and a practical component reset.

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

<p>This turns red.</p>
<p class="reset-style">
  This paragraph has all styles reset to initial values.
</p>

<style>
  .parent {
    font-family: Arial, sans-serif;
    color: darkblue;
  }
  .child {
    all: inherit;
  }
</style>

<div class="parent">
  <p class="child">
    This paragraph inherits its styles from its parent.
  </p>
</div>

.card {
  color: #0f172a;
  font-family: Georgia, serif;
}

.card .note {
  margin: 2rem;
  border: 4px solid orange;
  all: unset;
  display: block;
}

<style>
  button {
    background: purple;
    color: white;
    padding: 1rem 2rem;
    border-radius: 999px;
  }
  .widget button {
    all: initial;
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #64748b;
    cursor: pointer;
  }
</style>

<button>Site button</button>
<div class="widget">
  <button>Widget button</button>
</div>

💡 Best Practices