CSS all Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS all property is a powerful shorthand that allows you to reset or redefine almost all CSS properties on an element in a single declaration. Rather than adjusting individual properties one by one, all provides a quick way to control how much styling an element inherits or retains from its parent or from user-agent styles. This makes it especially useful when working with complex layouts, reusable components, or third-party content where unexpected inherited styles can cause inconsistencies. By applying all, you essentially tell the browser how to treat the element’s entire styling context at once.

One of the key strengths of the all property is its ability to neutralize inherited or previously applied styles. For example, when creating isolated UI components, widgets, or embedded elements, you may want them to behave as if they exist in a clean environment. In these cases, all can reset visual characteristics such as layout behavior, typography, spacing, and appearance without manually overriding properties like margin, color, or font. This makes your CSS more maintainable and reduces the chance of missing a property that could affect rendering.

Another important aspect of the all property is how it interacts with inheritance and the cascade. Because it applies broadly, it can dramatically change how an element behaves within the document flow, sometimes requiring you to reapply essential properties such as display or position afterward. For this reason, all is best used intentionally and sparingly, particularly in production layouts. When used thoughtfully, it becomes a powerful tool for creating predictable, self-contained components and simplifying complex CSS structures without sacrificing clarity or control.

Definition

Initial value: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.all

Interactive Demo

This paragraph has a font size of 1.5rem and a color of gold. It also has 1rem of vertical margin set by the user-agent. The parent of the paragraph is a

with a dashed blue border.

Syntax

all: initial | inherit | unset

Values

initialThis keyword will change all the properties applying to the element or the element to their initial value.
inheritThis keyword will change all the properties applying to the element or the element to their parent value.
unsetThis keyword will change all the properties applying to the element or the element to their parent value if they are inheritable or to their initial value if not.

Example

HTML

<html>

  <body>

    <div class='wrapper'>

      <h1>CSS all property  -  examples</h1>



      <div class='row'>

        <div class='example'>

          <p>Default button (browser styles)</p>

          <button>Default</button>

        </div>



        <div class='example'>

          <p>Button with all: unset (removes default button styles)</p>

          <button class='btn-unset'>Unstyled</button>

        </div>



        <div class='example'>

          <p>Button with all: initial (resets properties to initial values)</p>

          <button class='btn-initial'>Initial</button>

        </div>

      </div>

    </div>

  </body>

</html>

CSS

/* Basic page styles */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f7fafc;
  color: #0f172a;
  padding: 32px;
  line-height: 1.4;
}

.wrapper {
  max-width: 880px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.example {
  background: #fff;
  border: 1px solid #e6e9ee;
  padding: 16px;
  border-radius: 8px;
  width: 260px;
  box-shadow: 0 2px 6px rgba(11, 15, 25, 0.03);
}

.example p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #334155;
}

/* Default button shows browser's built-in styling */
button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
}

/* all: unset removes all inherited and user-agent styles, making it a blank slate */
.btn-unset {
  all: unset;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #06b6d4, #0891b2);
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* all: initial resets properties to their initial values defined in the spec */
.btn-initial {
  all: initial;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* small responsive tweak */
@media (max-width: 640px) {
  .row {
    flex-direction: column;
  }
  .example {
    width: 100%;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS all property. Hover over a browser icon to see the version that first introduced support for this CSS property.