The Importance of CSS !important

This article is to bring light to the !important rule within CSS. CSS by default uses the last specified rule to style a document. However with the use of the !important rule, you can quickly override all subsequent modifications to the same property.

p{
color:grey;
}
a{
color:black;
}
p{
color:pink;
}

Using the above style in your stylesheet will render any paragraph the colour pink! How about the code below?

p{
color:grey !important;
}
a{
color:black;
}
p{
color:pink;
}

Now any paragraph will be rendered the colour grey.

I'm sure if this is W3 complaint but you can also override previous !important rules as follows.

p{
color:grey !important;
}
a{
color:black;
}
p.aclass{
color:pink !important;
}

This would allow the aclass to over rule the Inherited attribute.

blog comments powered by Disqus

Lijit Search