CSS all Property

Description

The all CSS property is a shorthand property that can be used to reset all of an element's properties, except for unicode-bidi, direction, and CSS custom properties, to their initial or inherited values. It can be used to quickly and easily remove all of the styling from an element, which can be useful for debugging purposes or for creating a reset stylesheet. The all property can also be used to roll back the cascade to a previous cascade layer. This means that if an element has multiple CSS rules applied to it, the all property can be used to reset the element's properties to the values that were specified in a previous rule.

Initial value

See individual properties

Applies to

See individual properties

Inherited

See individual properties

Computed value

See individual properties

Animatable

See individual properties

JavaScript syntax

object.style.all

Interactive Demo

/*no all property*/;

all: initial;

all: inherit;

all: unset;

all: revert;

Syntax

all: initial | inherit | unset 

Values

• initialThis keyword will change all the properties applying to the element or the element to their initial value.
• inheritThis keyword will change all the properties applying to the element or the element to their parent value.
• unsetThis keyword will change all the properties applying to the element or the element to their parent value if they are inheritable or to their initial value if not.

Example

<div>Regular block<div> 

<div class="test">all: initial;<div> 

<div class="test2">all: inherit;<div> 

<div class="test3">all: unset;<div> 

body {
   color: blue; 
   font-size: small; 
   background: azure; 
} 
div {
   color: red; 
   background: skyblue; 
} 
.test {
   all: initial;
} 
.test2 {
   all: inherit; 
} 
.test3 {
   all: unset;
} 

Browser Support

The following table will show you the current browser support for the CSS all property.

Desktop
79	37	27	24	9.1

Tablets / Mobile
37	27	24	9.3	3	37

Last updated by CSSPortal on: 31st December 2023