all
The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.
Syntax
/* Global values */ all: initial; all: inherit; all: revert; all: unset;
The all property is specified as one of the CSS global keyword values. Note that none of these values affect the unicode-bidi and direction properties.
Values
initial-
Specifies that all the element's properties should be changed to their initial values.
inherit-
Specifies that all the element's properties should be changed to their inherited values.
unset-
Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
revert-
Specifies behavior that depends on the stylesheet origin to which the declaration belongs:
- User-agent origin
-
Equivalent to
unset. - User origin
-
Rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
- Author origin
-
Rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. For purposes of
revert, the Author origin includes the Override and Animation origins.
Formal definition
| Initial value | There is no practical initial value for it. |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but unicode-bidi and direction) |
Formal syntax
initial | inherit | unset | revert
Examples
HTML
<blockquote id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </blockquote> Phasellus eget velit sagittis.
CSS
body { font-size: small; background-color: #F0F0F0; color: blue; margin: 0; padding: 0; } blockquote { background-color: skyblue; color: red; }
Result
No all property
The <blockquote> uses the browser's default styling which gives it a margin, together with a specific background and text color. It also behaves as a block element: the text that follows it is beneath it.
all:unset
The <blockquote> doesn't use the browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), but its font-size is still small (inherited value) and its color is blue (inherited value).
all:initial
The <blockquote> doesn't use the browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), its font-size is normal (initial value) and its color is black (initial value).
all:inherit
The <blockquote> doesn't use the browser default styling: it is a block element now (inherited value from its containing <body> element), its background-color is #F0F0F0 (inherited value), its font-size is small (inherited value) and its color is blue (inherited value).
Specifications
| Specification |
|---|
| CSS Cascading and Inheritance Level 6 (CSS Cascading and Inheritance 6) # all-shorthand |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
all |
37 |
79 |
27 |
No |
24 |
9.1 |
37 |
37 |
27 |
24 |
9.3 |
3.0 |
revert |
84 |
84 |
67 |
No |
70 |
9.1 |
84 |
84 |
67 |
No |
9.3 |
14.0 |
See also
CSS global keyword values: initial, inherit, unset, revert
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/all