CSS Precedence

Have you ever wondered how many places we can define css?

We usually define

• in a separate css file,
• occassionally inline as well

but which one takes the precedence when we have styles defined in multiple places which target the same behaviour.

Ideally its best to define all css in one place but in real world it may not happen that way so in this short but productive post I highlight the precedence of css(starting with the highest order of precedence)-

• !Important styles

li{
list-style-type: none !important;
}

• Inline styles

<a style="color: blue;" aria-current="page" href="#">Home</a>

• Id attribute styles

#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

• class styles

<a class="nav-link text-black" href="#">Home</a>

when 2 css classes are used and if both happen to define the same behaviour then the last css style takes precedence