Templatix Blog

If you didn’t know it yet, there’s a little CSS “hack” that, properly used, not only passes all classic validation systems, but is also very useful. We’re talking about !important;.

Basic usage: instead of width: 300px; you can write width: 300px !important;. But, more important, what does it do? Let’s see…

The basic function of !important; is to priorotize/set an ierarchy among the CSS properties attached to a page (be those inline or linked in external css files). In this respect, it can be used for 2 main purposes:

1. The first purpose, more known, is to differentiate certain properties between FF and IE. In this instance, the hack relies on the fact that, in the cases where IE finds 2 definitions of the same property, it tends to prefer the property that doesn’t have the !important; attached to it.

Example:
Let’s say we want an element to have in IE width: 100px; and in FF 120px; How do we achieve this? Easy: we write the same property twice: width: 120px !important; width: 100px;. FF will understand from this 120px, and IE will understand 100px. Easy, to the point and in many cases very useful.

2. The second, less known but just as important function, it to prioritize ierarchically a css property. What does this mean?

A. You may know (or just find out, now) that in CSS you can define CLASSES ot TAGs. The classes are particular cases and are prefixed with a dot, and the tags are global re-definitions of the way HTML tags should display. body {} redefines a TAG, and .body {} is a CLASS.

What’s important here is that a TAG’s properties are superior, ierarchically, to those of a CLASS. If, for instance, I define p {color: #cccccc;} and then, in a particular P, I want to use the class .green {color: #009900;}, .green will show up gray, instead of green, because a tag is more general/powerful than a class, i.e. P is more general/powerful than .green.

B. You may also know (or just find out) that in CSS we can define complex classes. For instance, .green {} is one thing, while .green .title {} means “all the titles found in a green“. This can help us structure, detail and prioritize very well and in an orderly fashion alot of classes and particular cases.

Getting back to our sheep: the bottomline from paragraphs A and B is that in CSS ierarchy exists and is important.
But what do you do when you need to override that ierarchy? YOU USE !important;.

This way, the problem above (the one with p and .green) can be solved like this: .green {color: #009900 !important;}. This way, if we use a .green in a p, the color property in .green will decome more important/powerful than the one in the p, and display correctly.