I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The One Ring

Subverting The Cascade: Using !important In CSS

css / resets

Estimated reading time: 3 minutes, 20 seconds

In previous articles I’ve been through the entire CSS hierarchy, from UA stylesheets to inline styles, showing how presentational rules become more powerful (but at the same time, less efficient) the closer they came to the element(s) they affect.

This can lead to a design conundrum: what if we want to overrule an inline style with a linked style sheet? The traditional – and correct – approach to says that this can’t be done. Using an inline style like the following:

<p style="color:red;">Ash nazg durbatulûk, ash nazg gimbatul…

…the paragraph will always be red, even if you have a linked stylesheet that says the opposite:

p { color: green; }

Under normal circumstances, the inline style will always take precedence. There is only one way around this limitation: adding !important after the value we wish to insist upon. This makes it an “absolute” rule: when !important is used, its associated property and value will overwrite all other contradicting CSS, wherever it may be. This makes !important rather like the One Ring: very powerful, but deeply corrupting.

By writing !important immediately after the value in the embedded or linked stylesheet and before the semicolon, we can force that rule to take precedence over all others:

p { color: green !important; }

If you’ve never heard of !important, it’s a good sign: you’ve probably been using CSS correctly. !important inverts the entire hierarchy of CSS. As such, the property should be avoided whenever possible: it subverts the flow of your style rules and makes your CSS a lot harder to understand or modify. That being said, there are a few scenarios in which its use is appropriate; the most common is to override inline styles that you cannot otherwise change.

A Practical Use Of !important: Overriding Inline Styles To Create Fluid Images

Let’s say you have a series of banner images in a web site that are all a set dimension. Being a good developer, you’ve probably added an inline style to the images:

<img src="blue-mosque.jpg" alt="Photograph of the Blue Mosque, Istanbul" style="width:768px; height: 223px;">
Photograph of the Blue Mosque in Istanbul
A fixed-width image made fluid by using !important in a linked stylesheet. Photograph of Blue Mosque by Tim O'Brien

Now you want to make all of these banner images completely fluid, in order to be part of a . That is, the images should now use max-width: 100%. The obvious choice – altering the inline style for every banner image on every page - would be laborious and time-consuming. The more efficient option is to control all the images from a linked style sheet, by using article header img { max-width: 100%; }

That works, but only to a point: the header images will scale horizontally, but not vertically, and adding max-height to the new rule will not work in the way you might expect.

We need to blow away the explicit inline height on all the article header images and replace it with height: auto. The problem is that trying to do so in a linked or embedded stylesheet won’t work: the image’s explicit inline style will always take precedence.

The solution is to use !important:

article header img { max-width: 100%; height: auto !important; }

Now, contrary to standard CSS rules, the inline height rule will be ignored, and the linked rule followed instead, transforming all of our banner images into responsive elements without time-consuming find-and-replace editing or hand-coding.

The overruling of inline styles – either declarations left over from legacy code or imposed from another source – is one of the few valid uses of !important. How often should you use it otherwise? Almost never. In nearly 20 years of web development, I can count the number of times I’ve done so on one hand. !important is the “nuclear option” in web design: you don’t ever want to go there, but when you absolutely have to, it’s often the only tool for the job.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.