Avatar of Marie Mosley
Marie Mosley on (Updated on )

The all property in CSS resets all of the selected element’s properties, except the direction and unicode-bidi properties that control text direction.

.module {
  all: unset;

The point of it is allowing for component-level resetting of styles. Sometimes it’s far easier to start from scratch with styling rather than fight against everything that is already there.


  • initial: resets all of the selected element’s properties to their initial values as defined in the CSS spec.
  • inherit: the selected element inherits all of its parent element’s styling, including styles that are not normally inheritable.
  • unset: the selected element inherits any inheritable values passed down from the parent element. If no inheritable value is available, the initial value from the CSS spec is used for each property.

A few properties do not have an initial value explicitly defined in the spec and instead allow the user agent to set the initial value — color and font-family are two examples. If all: initial; or all: unset; is applied, the user agent default value is used as the initial value for these properties.

all is considered a “shorthand” property because it allows us to control the values of every CSS property at once with a single declaration. However, unlike most shorthand properties, there is no practical “longhand” version and it has no sub-properties.


See the CSS tab for comments that indicate which properties are inheritable. Notice that when the inherit value is used, the div inherits every property from its parent, including it’s width, padding, and border, which are not normally inherited.

See the Pen all property demo by CSS-Tricks (@css-tricks) on CodePen.

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari