The Definitive Guide to CSS Styling Order

December 12, 2018 ·  Thomas Yip
Software Development Director · Web Design · Everything SVG

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.ad52d74e06.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.ad52d74e06.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

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

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.