all

all resets almost every CSS property on an element using one global keyword. It excludes direction, unicode-bidi, and custom properties such as --brand-color.

Compare initial and inherited values

<section>
  <p>This paragraph inherits blue.</p>
  <p class="sample">This paragraph uses initial color and font values.</p>
</section>

section {
  color: #164eae;
}
.sample {
  all: initial;
}
/* Optional presentation applied after the reset */
.sample {
  display: block;
  padding: 1rem;
  border: 1px solid #64748b;
}

The reset paragraph uses the initial values rather than inheriting the section’s color. The later rules deliberately restore block layout, padding, and a border. Change initial to inherit to compare the parent’s computed values.

The keywords

• initial uses each property’s defined initial value. A browser’s default stylesheet can have a different value; for example, a div’s initial display value is not its usual browser-styled block display.
• inherit takes every affected property’s value from the parent, including properties that normally do not inherit.
• unset inherits inherited properties and resets the others to their initial values.
• revert rolls back declarations at the current cascade origin.
• revert-layer rolls back declarations in the current cascade layer.

The initial value of the shorthand is determined by its longhands; it has no independent element style to inherit. A reset affects the element itself, while some changed inherited values can affect descendants.

A practical use and a warning

A component can use all: revert to remove an author reset and recover user or browser defaults, then add a small explicit stylesheet. Test the resulting control behavior, focus styles, and inherited fonts. Resetting a button with all: unset can remove visible focus, borders, and other cues people need to recognize it as a control.

Why it may not do what you expect

Later declarations can override a reset at the same cascade position. all does not erase custom properties. initial does not mean “the browser’s normal HTML appearance.” Learn the cascade before using a broad reset.

A second working case

<p>The button below rolls back the author reset.</p>
<button
  type="button"
  class="restored"
  onclick="this.textContent = 'Action checked'"
>
  Check action
</button>

button {
  all: unset;
  color: #164eae;
}
.restored {
  all: revert;
}
.restored:focus-visible {
  outline: 3px solid #164eae;
  outline-offset: 3px;
}

The later revert declaration rolls back author-origin values, so the native button appearance returns. The explicit focus rule is applied afterward. Activate it to verify it remains a working control.

Sources and browser support

MDN: all describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.