CSS Reference Property

all

The all property is a shorthand property that you can use to reset all CSS properties on an element, except direction and unicode-bidi.

It can be used to reset the properties to their initial values or to force these properties to inherit their values from the cascade.

The property takes one of three values: initial, inherit and unset. See the following sections for examples and use cases.

Official Syntax

  • Syntax:

    all: inherit | initial | unset
                           
  • Initial: It does not have an explicit initial value.
  • Applies To: all elements
  • Animatable: no

Values

initial
This keyword indicates that all properties of the element (execept direction and unicode-bidi) are to be set to their default initial values.

You can refer to the initial entry for more about this keyword.

inherit
This keyword indicates that all properties of the element (execept direction and unicode-bidi) that can inherit from the element’s ancestor are to be set to their inherited values.

It is important to note here that if you haven’t specified any value for a certain property on an ancestor of the element then it will end up inheriting from the user agent’s default style sheet. So the property value keeps moving up in the cascade till it finally inherits from the UA if it does not find any declared value in the style sheet.

You can refer to the inherit entry for more about this keyword.

unset
This keyword is practically a combination of the initial and inherit keywords: if the property in question is usually inherited by default, then the keyword is treated as inherit and the inherited value is used; if the property is not usually inherited by default, the keyword is treated as initial and the property is set to its initial value.

In other words, this keyword effectively erases all declared values occurring earlier in the cascade, correctly inheriting or not, as appropriate for the property in question.

Examples

If you set all: initial on an element, it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. This means that only the initial values specified in the CSS specification for each property will be applied; not even browser default styles will apply anymore. This can be useful for the root element of a “widget” included in a page, which does not wish to inherit the styles of the outer page.

That being said, it is important to note that if you have an element such as a <div>, it will be reset to its initial display value which is inline, as opposed to the “default” browser-applied block display.

Using The all Property To Style SVG Content

SVG presentation attributes override any inherited styles on an element. They are overridden by any style declarations (inline, <style> or external), but they override inherited styles, including those applied by the default US style sheet.

So, if you have the following example, the circle in this SVG is going to be orange:

<style>
    circle {fill: orange;} 
</style>

<svg version="1.1" viewBox="0 0 400 400">
    <g fill="yellow">
        <circle cx="100" cy="100" r="100" fill="blue" />
        <!-- ... -->
    </g>
</svg> 
                

Because of this, styling the contents of a <use> from CSS element can be a little tricky, especially if you need to keep the presentation attributes in the SVG code (which I usually recommend). Normally, any styles you apply to the <use> element will be inherited by all of its content. So if you are specifying a fill color on the SVG, for example, all of the contents of <use> will get that color, unless they have a presentation attribute set that overrides it.

To overcome this, you can take advantage of the cascade and explicitly tell the browser to inherit the styles from the <use> element by using (you guessed it) the inherit keyword.

For example, if you know you want to specify the fill and stroke color in CSS, you can do something like this:

svg circle {
    fill: inherit;
    stroke: inherit;
}
                

Now, using the all property, you can take this further by taking an extreme measure and setting all the circle‘s properties to inherit from <use>, so you don’t have to explicitly decalare the above declaration for all properties. This is particularly useful if you have no control over the generated SVG code but still want to be able to apply some styles to it via CSS.

svg circle {
    all: inherit;
}
                

However, keep in mind that this is indeed an extreme measure, and that if you don’t set the values for those properties in CSS, the circle will end up inheritng the default browser styles—which is probably what you may not want.

Live Demo

Change the value of the all property in the following demo to see its effect on the child element of the container.

View this demo on the Codrops Playground

The parent container inherits its font family from the body element and is set to Verdana.
Its background color is set to white. If you set the all property on the child element to unset, its background color will be set to its initial value of transparent, because the background color is not inherited on an element by default.

One thing to keep in mind is which properties would be inherited in CSS by default and which not, this will make the main difference when setting the all property to a value of unset.

Setting and changing the value of the all property on the child container (dark background) will change the background color, text color, and even font family, depending on what value you use, and depending on the values set on the parent or higher ancestor. If you set all to inherit, even the padding of the child element will be affected, and it will even get a grey border as its parent!

The image in the child element has been set to display at a block-level in the CSS. If you use a value all: initial; on the image for example, it will be reset to its initial inline display, and will be on the same line as this text. Try it.

Browser Support

The all property is currently supported in Firefox, Chrome, Internet Explorer 11+ and Opera 24+. It is not supported in Safari or on mobile—except on mobile Gecko.

Written by . Last updated May 25, 2015 at 9:43 pm by Sara Soueidan.

Do you have a suggestion, question or want to contribute? Submit an issue.