all

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.