CSS all Property

The all property is a shorthand that resets every CSS property of an element at once, excluding direction and unicode-bidi.

selector { all: value; }

initial	Sets all properties to their official CSS specification initial values.
inherit	Forces all properties to inherit values from the parent element.
unset	Resets properties to their inherited value if they naturally inherit, or their initial value if they do not.
revert	Resets properties to the default styling established by the browser user-agent stylesheet.
revert-layer	Resets properties to values established in a previous cascade layer.

Code Examples

A basic example showing how the unset keyword removes the default user-agent styles of a div.

<div style="all: unset; border: 1px solid #000000; padding: 10px;">
  This div has no default block behavior or browser margins because of the unset value.
</div>

An advanced example using JavaScript to dynamically wipe all styles from a container to isolate it from the rest of the page's CSS.

<div id="widget" style="background: #f0f0f0; padding: 20px; font-weight: bold;">
  <p>Component Content</p>
  <button onclick="isolate()">Isolate Component</button>
</div>

<script>
function isolate() {
  const el = document.getElementById("widget");
  // Clear all styles and apply a clean background
  el.style.all = "unset";
  el.style.display = "block";
  el.style.backgroundColor = "#ffffff";
  el.style.border = "1px solid #cccccc";
}
</script>

Pro Tip

If you want to clear your custom styles but still want a button to look like a button, use all: revert;. Unlike initial which goes back to the raw CSS spec, revert goes back to the browser's default stylesheet, keeping the native look and feel of form elements and layout tags intact.

Deep Dive

Think of the all property as a factory reset button for an HTML element. Instead of manually clearing out individual styles like margin, padding, color, and font-size, you can use this property to wipe the slate clean in one line. It is effectively a master switch that targets every single CSS property that can be applied to an element. When you apply a value like unset, the browser looks at every property the element has: if the property is naturally inherited (like color), it keeps the inherited value; if it is not (like padding), it goes back to the CSS specification's default. This is extremely powerful for ensuring that an element does not carry any unwanted baggage from global styles or previous declarations in the cascade.

Best Practices

Use all: unset; when you are building encapsulated components, like a custom widget or a third-party script, that needs to live on a page you do not control. This prevents the host site's global styles from leaking into your component and breaking the layout. It ensures your component starts from a predictable baseline regardless of the surrounding environment.

Common Pitfalls

The most common mistake is using all: initial; on block-level elements like div or section. In the CSS specification, the initial value for display is actually inline, not block. If you use initial, your boxes will suddenly behave like text and sit side-by-side. Additionally, all does not affect CSS Custom Properties (variables), so variables will persist even after a reset.

Accessibility

When you use all: unset; or all: initial;, you often strip away the default focus rings and outlines that browsers provide for keyboard navigation. This can make your site unusable for people who do not use a mouse. Always ensure that you manually re-apply clear :focus and :hover styles to any interactive elements after performing a global reset.

Dev Data Table: all property

default	none
animatable	no
inherited	no
experimental	no
year_intro	2013
year_standard	2016
js_syntax_1	element.style.all = "unset";
js_syntax_2	element.style.setProperty("all", "initial");
js_note	When manipulating the all property via JavaScript, be aware that it will immediately override any inline styles previously set on that element for all individual properties.
browsers	{ "Chrome": 37, "Edge": 12, "Firefox": 27, "Safari": 9.1, "Opera": 24, "Chrome Android": 37, "Safari on iOS": 9.3, "Samsung Internet": 3, "Opera Mobile": 24 }