Precedence is the word which comes in mind when we speak about !important tag.

Yes Definitely CSS tag !important rules by taking its precedence over later rules. Normally CSS starts its precedence from top to bottom, but when we add this !important tag CSS changes its rule by giving entire precedence to particular property value.

Below you will find some examples which gives you the better idea about it,

1. Normally in CSS

p{
color: red;
}

p{
color: black;
}

In the above example the highlighted one that is property with the value black will take the precedence, in which CSS normally do.

2. using !important tag

p{
color: red !important;
}

p{
color: black;
}

Yes in the above example you can find some difference. The highlighted one will holds its precedence that means the property paragraph holds its value finally as red now.

3. Now question arises for you is if we applied !important tag to both the properties, what is the final value?

p{
color: red !important;
}


p{
color: black !important;
}

In the above example CSS plays its normal role from top to bottom and puts its value as black.