!important declaration in CSS

In CSS we can declare style rules like !important so that they take precedence over other style rules that might be found in a web page.

We are going to see in this .com article, encompassed within the , a somewhat special declaration that we can use when defining style rules for a web page. This is !important, a word that will make certain properties take on greater importance and, therefore, be taken into account more than others that can overwrite them.

Another thing we’ll see in passing is how using !important will provide us with a simple and valid technique for defining different style rules for older browsers, like Internet Explorer 6.

Also important! It can be used in user style sheets, so that each person can define for their own browser if they wish, a default CSS style that is taken into account in all the websites we visit. This case was already explained in the article.

Use and effect of the !important declaration

To use !important in a style rule, it is always placed in the value part of the attribute, before the semicolon “;”. For example:

body{ font-family: verdana, arial !important; }

The effect is that the style defined as !important will always be applied, even though it may then be overridden with another style later in the same or a different declaration. Let’s see this example:

td{ font-size: 16pt !important; font-size: 8px; }

We have a styles declaration for the TD elements, where we define the font-size attribute twice. Under normal conditions, the value defined second would be taken into account, because it overwrites it. However, since the first font-size is defined as !important, what will actually happen is that it will finally be taken into account and the font size will therefore be 16pt.

This effect can also be applied to different types of . So we can find that for an element a style is indicated and then for a class (CSS class) another is applied and the one defined as !important is taken into account. Let’s look at this CSS example:

td{ font-family: verdana, arial !important; } td.mycell{ font-family: monospace; }

That applied over the following HTML:

It would normally result in the first cell, of class “mycell”, having the font font-family: monospace and the second cell, which has no class, having the style font-family: verdana, arial. However, since the font-family defined in the first case has the !important declaration, the font will always be verdana, arial, for the two cells.

Using !important to define different styles in older browsers

The !important declaration is not understood by all browsers, so some will simply ignore it and others will not. The most representative case, as it is a browser that is still commonly used by Internet users, would be Internet Explorer 6.

So, using !important we can manage to define different styles for Internet Explorer 6 and for most other browsers that can visit our website. We can achieve this in the following way.

div{ background-image: url(semi-transparent-background.png) !important; background-image: url(background.gif); }

Since Internet Explorer 6 ignores the !important directive, it will happen that it will take into account the second value of background-image, since it is repeated and therefore overwrites the first one. So in this case IE6 will display the file called “background.gif” as the background.

The other browsers, as they understand !important, will show the style that you had previously defined and will therefore use the file “background-semitransparente.png” as background.

Note: By the way, as IE6 has problems displaying semi-transparent backgrounds (with ) this would be a possible technique to get Explorer 6 to use a different image background (for example in .gif) than the one used in other browsers that have no problem with .png.