CSS 'all' Property Explained

The CSS 'all' property is like the master reset switch for CSS styles on an element. When applied, it can reset all the properties of an element to their initial or inherited values, except for a few exceptions: direction and unicode-bidi, which deal with text direction, and CSS custom properties (variables), which all never changes. It's a powerful tool for quickly undoing styles without resetting each property individually.

CSS 'all' Property Examples

See the Pen CSS 'all' Property by Webzstore (@webzstore) on CodePen.

The 'all' property is a potent tool, especially in modular CSS where components need to be styled independently of their surrounding context. Its ability to reset or redefine the styling context of an element with a single line of CSS can be incredibly useful for web developers looking to manage complex stylesheets and ensure consistent styling across different parts of a website or application.

Browser Support For 'all' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for all for the full compatibility details, including mobile browsers.

CSS Syntax of the 'all' Property

all: initial | inherit | unset | revert | revert-layer;

Usage of the 'all' Property

Use the 'all' property when you want to start styling an element from a clean slate. This is especially useful in situations where you're dealing with a complex stylesheet or when you want to ensure an element is not affected by external styles. It's also handy for components inserted into unknown contexts, like widgets or third-party content, where you want to minimize the risk of style conflicts.

Property Values of the 'all' Property

• Initial: Resets all the properties of the element to their initial values, as defined by CSS specifications. This is not the same as the browser's default look: for example, display becomes inline (its initial value) rather than the block that the browser's own stylesheet gives a div or blockquote. To go back to the browser's (or user's) styles instead, use revert.
• Inherit: Sets all the element's properties to inherit values from its parent. Suppose a property does not naturally inherit (like width). In that case, it will still be forced to inherit with this value.
• Unset: This acts as a hybrid of initial and inherit. Each property applies to inherit if it is inheritable and initial if not. This is often the most practical choice, as it respects styles' natural cascading and inheritance.
• Revert: Rolls the cascade back to the previous origin. In an author stylesheet it discards the author styles for the element's properties and falls back to the user's styles, if any, or otherwise the browser's default (user-agent) styles. This is how you get a blockquote back to the browser's default blockquote styling, which initial does not do.
• Revert-layer: Rolls the cascade back to the previous cascade layer, or, if there is no earlier layer, to the matching rules of the current layer.