The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important declaration should be used with caution, it's a very useful and powerful expression that much deserves its place in our CSS world. This article offers a guide to what the declaration is, what it does and how you should use it

How is it declared?

The !important declaration is a keyword that can be added at the end of any CSS property/value. For example:

p {margin-left: 5px !important}

or

p {margin: 10px 5px 0 10px !important}

What is its impact?

The CSS assigns a weight to each rule depending on the specificity of its selector and its position in the source. This determines which style is applied to an HTML element.

If 2 rules conflict on a single element then the following principles will be applied:

  • Origin of rules - If a rule between an author and a user stylesheet conflicts, the user's rules will win over the author's rules.
  • Specificity - When 2 or more declarations that apply to the same element set the same property and have the same importance and origin, the declaration with the most specific selector will be applied.
  • Source order - When 2 rules have the same weight, the last rule declared in the stylesheet will be applied.

There might be times when it would be useful to change the order of sequence. It's possible to break that cascading chain by using the !important CSS declaration. When the !important declaration is used on a property/value, that value becomes the most important for that property and overrides any others.

In this example, the second selector is more specific and declared last but the first rule will take precedence because the !important declaration overrides any other value that is set for this element.

p {margin-left: 5px !important}
#id p {margin-left: 10px}

If an !important keyword is appended to a shorthand declaration:

p {margin: 10px 5px 0 10px !important}

It's the same as adding it to each property:

p {
margin-top: 10px !important;
margin-right: 5px !important;
margin-bottom: 0 !important;
margin-left: 10px !important
}

When should you use !important ?

Here are some examples when the !important declaration can be used:

Targeting IE 5/6

Internet Explorer 5 and 6 ignore the !important declaration if the same property is declared twice in the same block of styles.

p {margin-left: 5px !important; margin-left:10px}

Internet Explorer 5 and 6 will apply a margin left of 10px to each paragraph while all the other browsers will apply a margin left of 5px.

Overriding inline styles

The !important declaration can be used to override inline styles generated dynamically by WYSIWYG editors in content management systems.

Text formatting defined via a WYSIWYG editor is inserted in the HTML code as inline styles. But those inline styles can be overridden by the !important declaration in the author stylesheet.

For example, a user may want to have a line of text styled in red:

<div id="content"><p style="color:red">Some text</p></div>

But the site's author can override this declaration by forcing all paragraphs of text within the content area to be styled in black:

#content p {color:black !important}

Print stylesheets

The !important declaration can also be used in a print stylesheets to make sure that the styles will be applied and not overridden by anything else.

What are the downsides?

The only way to override an !important declaration is by using an even more specific !important declaration. This can make the stylesheets quite cluttered and very difficult to maintain.

Good to know

In CSS1, an important declaration in an author stylesheet took precedence over the user's stylesheet. This order has been reversed in CSS2 to make sure that users can always overwrite an author's stylesheet if wanted.

Conclusion

The !important declaration if used without much consideration can make CSS files difficult to maintain but if used with forethought, it can save time and effort.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation