CSS style hierarchy

#tutorial #beginners #css #html

I am a codeNewBie who has started learning HTML, CSS and JavaScript since October 2019 and have completed the "Basic CSS" course from freecodecamp very recently. Learning CSS has been an amazing journey so far power but the power of classes and IDs and who overrides whom still remained confusing to me, hence I have decided to write this post to allow myself and you to understand the hierarchy a little better and in-depth using scenarios.

Override hierarchy

There are many ways we can style our html element tags using CSS. We can override style rules by using different type of selectors. Below is a demonstration of which CSS selector has precedence over other css selectors:

SCENARIO 1

<h1>
    Cat Shop
</h1>

body {
    color: green;
}

Output: Cat Shop is green.
Reason: Because we have assigned the color green to the body element.

SCENARIO 2

<h1>
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}

Output: Cat shop is red.
Reason: Even though our parent container element body sets the color to be green, we are overriding the parent style rule with child element selector.

SCENARIO 3

<h1 class="blue-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}

Output: Cat Shop is blue.
Reason: A class can override the style rule set through the element selector.

SCENARIO 4

<h1 class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is pink.
Reason: The order of the classes listed inside the <h1> element is irrelevant. However, in CSS, the second declaration will always override the first declaration because browsers always read CSS from top to bottom in order of their declaration. Since pink-text is below the blue-text, the text of Cat Shop changed to Pink.

SCENARIO 5

<h1 id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
}
h1 {
    color: red;
}
.blue-text {
    color: blue;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is orange.
Reason: ID selector always takes precedence over class selector regardless of whether it was declared above or below the class style.

SCENARIO 6

<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

Output: Cat Shop is black.
Reason: Notice how we added style="color: black;" to our h1 element. Inline HTML style attribute overrides the element, class and the ID selectors altogether.

SCENARIO 7

<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
    Cat Shop
</h1>

body {
    color: green;
} 
h1 {
    color: red;
}
.blue-text {
    color: blue !important;
}
#orange-text {
    color: orange;
}
.pink-text {
    color: pink;
}

Output: Cat Shop is blue.
Reason: !important is the most powerful of all. So when you absolutely need to be sure that an element has specific CSS, you can use !important which overrides all of element, class, ID selectors and inline style attribute. Using !important should be last resort when attempting to override a previously defined style rule.

I hope the scenarios were helpful to you and if you have suggestions regarding other scenarios please let me know in the comment. Also like I mentioned before I am very new to programming as as well writing blog posts, so if any mistakes were found please feel free to correct me. Thank you for reading!

Top comments (9)

Nicholas Stimpson • Dec 7 '19 • Edited

I recommend a couple of other scenarios that you should investigate to help your understanding.

<h1 class="blue-text light">
    Cat Shop
</h1>

.light.blue-text {
    color: lightblue;
}

.blue-text {
    color: blue;
}

and

<h1 class="blue-text">
    Cat Shop
</h1>

.blue-text {
    color: blue !important;
}

h1 {
    color: pink !important;
}

Suborna • Dec 8 '19

Hey, these are two very good examples. thank you soooo much!! Would you mind if I add them in my post as scenarios?

Nicholas Stimpson • Dec 8 '19

Not at all. Free free to do so.

Suborna • Dec 8 '19

Had to reply to you the last because I had to test them out myself and see the output. I am really glad that you have pointed these out and I got the opportunity to learn. thank you again.