December 12, 2018 · SVG · Web · CSS

The Definitive Guide to CSS Styling Order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

Jump right to the CSS order diagram to see how everything works.

Styling methods

There are a myriad of ways you can apply CSS rules to an element, listed by ascending priority (higher priority at the bottom):

<!-- Inheritance -->
<g style="stroke: red">
    <rect x="1" y="1" width="10" height="10" /> <!-- inherits stroke: red -->
</g>

<!-- Inline attributes -->
<rect x="1" y="1" width="10" height="10" stroke="red" />

<!-- External style sheet -->
<link rel="stylesheet" href="/blog/css/blog.cb4a4624b8.css">

<!-- Embedded styles -->
<style>
    rect { stroke: red; }
</style>

<!-- Different specificity or selectors -->
rect { stroke: red; }
.myClass { stroke: red; }
#myID { stroke: red; }

<!-- Inline style -->
<g style="stroke: red"></g>

<!-- Important keyword -->
<g style="stroke: red !important"></g>

Inheritance

We all know, both HTML and SVG elements can inherit CSS rules that's being applied on their parents. However, inheritance has the lowest priority among styling methods, which means, if a child has a rule that is specific to it, then the inherited value will be ignored, even though the inherited value may have an important keyword.

<g style="stroke: red !important">
    <!-- Blue will be applied, despite important keyword -->
    <rect x="1" y="1" width="10" height="10" stroke="blue" />
</g>

Inline attributes (for SVG elements)

For SVG elements, we can also style an element using inline attributes, where it has the second lowest priority, meaning, CSS rules in style sheets will be able to override them.

<rect x="1" y="1" width="10" height="10" stroke="blue" />

Most SVG editors uses inline attributes for portability, that is the ability to copy some elements and paste it elsewhere without losing it's attributes. Users can then use the resultant SVG and style them easily using an external style sheet.

Style sheets

Style sheets are divided into external style sheets and embedded style sheets:

<!-- External style sheet -->
<link rel="stylesheet" href="/blog/css/blog.cb4a4624b8.css">

<!-- Embedded styles -->
<style>
    rect { stroke: red; }
</style>

Both embedded and external style sheets follow ordering rules, where styles that are defined at the right or bottom, will have higher priority.

<link rel="stylesheet" href="/blog/css/blog1.css">
<link rel="stylesheet" href="/blog/css/blog2.css">

In the example above, if you have duplicate rules in blog1.css and blog2.css, the CSS rules in blog2.css will be applied. The same is true for embedded styles, where styles declared at the bottom will have higher priority.

Specificity or selectors

How you select your elements will also determine which rules are applied, where tags (eg: p, div), classes (eg: .myClass) and ID (eg: #myID) have ascending priorities.

<!-- Different specificity or selectors -->
#myID { stroke: red; }
.myClass { stroke: blue; }
rect { stroke: green; }

In the example above, if you have a rect element with both .myClass and #myID, the stroke will be red because IDs has higher priority than classes and tags.

Specificity has higher priority than ordering rules, therefore, irrespective if your rule is at the top or bottom, specificity still has higher priority and will be applied.

Ordering

CSS rules always prioritize from left to right, then from top to bottom.

<!-- Blue will be applied because it is on the right -->
<g style="stroke: red; stroke: blue"></g> 

<style>
    g {
        stroke: red;
        stroke: blue; //Blue will be applied because it is at the bottom
    }
</style>

Inline styles

Inline styles have the second highest priority, just below the important keyword. This means that inline styles are only overridden by the important keyword and nothing else. Within inline styles, normal ordering rules applies, from left to right and top to bottom.

<g style="stroke: red"></g>

The important keyword

The important keyword is used to override ordering, specificity and inline rules.

Overriding inline rules

<style>
    //Important keyword overrides inline styling priority
    rect { stroke: orange !important; }
</style>
<rect x="1" y="1" width="5" height="5" style="stroke: green" />

In the example above, without the important keyword, the rectangle will be green, because inline styling has higher priority than embedded styles. With the important keyword, the rectangle now becomes orange, because important keyword has higher priority than inline styling.

Overriding specificity rules

<style>
    .MyClass { stroke: red; }
    //Important keyword override specificity priority
    rect { stroke: orange !important; }
</style>
<rect class="MyClass" x="1" y="1" width="5" height="5" />

In the above example, without the important keyword, the rectangle will be red, because classes have higher priority than tags in specificity. With the important keyword, the rectangle will be orange, with the important keyword essentially overriding specificity rules.

Overriding ordering rules

<style>
    //Important keyword override ordering priority
    rect { stroke: orange !important; }
    rect { stroke: red; }
</style>
<rect x="1" y="1" width="5" height="5" />

In the example above, without the important keyword, the rectangle will be red because of ordering rules where rules at the right or bottom will apply. With the important keyword, the rectangle will be orange because important keyword overrides ordering rules.

How everything works in a diagram

The definitive guide to CSS styling order in a diagram
The definitive guide to CSS styling order in a diagram

Having a diagram helps us visualize how everything is ordered in terms of priority, and hopefully it has helped you too! If you want to keep a copy of this diagram, you can save it here.

Originally published at CSS-TRICKS on November 13, 2018

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

May 14, 2019 · SVG · Web

5 Most common problems faced by SVG users

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

March 09, 2019 · SVG · Web · PNG

Improving mobile page speed by 200% using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation t...

January 14, 2019 · SVG · Web

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.