How css(Cascading Style Sheet) styles override each other.

3 min readJul 13, 2021

In this article, I will walk you through how css styles override each other, its recommended for those who have intermediate knowledge in css.
Now lets go into details.

let use the below html snippet code as an example:

<!DOCTYPE html>
<html>
<head>
<tittle>getting started with fauna</fauna>
</head>
<style>
.greentext{
color: green;
}
</style>
<body>
<h3 class=”greentext bluetext”>I am a technical writer of Fauna</h2>
<p class=”greentext bluetext”> And am here to produce educative content.</p>
</body>
</html>

the above snippet code will make your h2 and p element text have a green color in which both have a class declaration with value=greentext, that's cool right.
lets check some modification(s) in the style section below:

<html>
<head>
<tittle>getting started with fauna</fauna>
</head>
<style>
.greentext{
color: green;
}
.bluetext{
color: blue;
}
</style>
<body>
<h3 class=”greentext bluetext>I am a technical writer of Fauna</h2>
<p class=”greentext bluetext> And am here to produce educative content.</p>
</body>
</html>

Now another class was added to the same element and style differently, if you can run the code on your browser, you will realize that the h2 and p text will change to blue color.
this mean that when you style the class of element repeatedly, the browser will always recognize the subsequent one and so on.

<html>
<head>
<tittle>getting started with fauna</fauna>
</head>
<style>
.greentext{
color: green;
}
.bluetext{
color: blue;
}
</style>
<body>
<h3 class=”greentext bluetext” style=”color:pink;”>I am a technical writer of Fauna</h2>
<p> And am here to produce educative content regarding technology</p>
</body>
</html>

Here Inline css style is added to h3 element, which affect the action of class style on h3 text
am pretty sure that if you try to run the code on browser you will still expects h3 element to be in color blue which in Capital NO.
The new color of the h3 element will be in pink because the inline style will override the one in the style section.

<html>
<head>
<tittle>getting started with fauna</fauna>
</head>
<style>
.greentext{
color: green;
}
.bluetext{
color: blue;
}
#violettext{
color: violet;
}
</style>
<body>
<h2 class=”greentext bluetext” id=”violettext”>I am a technical writer of Fauna</h2>
<p> And am here to produce educative content regarding technology</p>
</body>
</html>

Running the above code will make the text of h3 have violet color because an id attribute is used to styled it. Id attribute is used when an element require a unique style.
Hence the id style will override class declaration styles in the style section.

<html>
<head>
<tittle>getting started with fauna</fauna>
</head>
<style>
.greentext{
color:green !important;
}
.bluetext{
color:blue;
}
#violetcolor{
color:violet;
}
</style>
<body>
<h2 class=”greentext bluetext” id=”violettext”>I am a technical writer of Fauna</h2>
<p> And am here to produce educative content regarding technology</p>
</body>
</html>

lastly but very educative, if you still need to make your h3 text to be in green color, probably to check if the color you have used in your styling befit each other or to know if there is conflicts in your styles so far, well that's depends on the developer intent, just put !important in front of the style in style section, This will automatically change the text to green color despite the id and inline css already used.
same is also applicable to any element in the style section. !important will override all other styles.

I believe this article will boost your knowledge on Cascading Style Sheet(CSS). Thanks for your time.

How css(Cascading Style Sheet) styles override each other.

Written by The Success sage🌚