all

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.

Values

• 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.

Demo

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

• all in the W3C CSS Cascading and Inheritance Level 4 Editor’s Draft
• CSS2 Full Property Table: shows inheritability of all CSS2 properties. The CSS3 specification is divided into multiple parts and is indexed on the Table of Specifications.
• Getting Acquainted with Initial: more detail on the initial value.
• Resetting style using ‘all: unset’ in Firefox 27 (2013) by Cameron McCormack

Browser Support