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