CSS all Property

The all property is a shorthand property which can be used to reset all CSS properties on an element with the exception of direction and unicode-bidi to either their initial or inherited value.

There is no explicit initial value for the all property. You can also apply it to any any element you want. This property is also not inheritable.

Syntax

This is the formal syntax for using all property:

all: inherit | initial | unset

Here are some examples of using this property:

all: initial;
all: inherit;
all: unset;

/* Available in CSS Cascading and Inheritance Level 4 */
all: revert;

Acceptable Values

initial

This keyword indicates that all properties of the element should to be set to their default initial values. As mentioned earlier, unicode-bidi and direction values are not affected.

inherit

This keyword indicates that all properties of the element which can inherit their value from the element’s ancestor should set to their inherited values. Just like the previous case, unicode-bidi and direction values are not affected by this property.

Keep in mind that if you have not set an explicit value for a property on any ancestor of the element, the final value of the property will be user agent’s default style sheet.

unset

This keyword indicates that all the properties applying to the element should be changed to their ancestor’s value if they are inheritable or to their initial value if they are not inheritable.

Examples

In the following example, I have explained the difference between three accepted values of the all property using a <blockquote>.

In simple terms, when all is set to inherit, the element just inherits all the properties from its parent. When all is set to unset, the element inherits the properties that are inheritable and the rest of the properties are set to their initial value. When all is set to initial, all the properties are set to their initial value.

See the Pen CSS all Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

This property is supported by Chrome 37+, Firefox 27+, Internet Explorer 11+ and Opera 24+. Ironically, the revert keyword is only supported by Safari 9.1 but it does not support any other value.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top