How to Override Inline CSS Styles

This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about CSS, you may find this recent article on CSS techniques for retina displays of great interest.

One of the most powerful features of CSS is the cascading. Knowing how a browser chooses and applies your styles is invaluable knowledge. Novices can find it especially confusing given that style use is influenced by the method used to include the CSS, the order of the rules, how the selectors are specified, and special declarations such as !important.

Inline styles are those defined in the HTML itself, e.g.

<p>This is an 
<strong style="color: red;">inline style that should be blue</strong>
.</p>

Inline styles have the highest priority of all CSS. In general, I would recommend you avoid using them and place your CSS declarations in external files. However, you may not have that luxury if you are working on a legacy system or do not have direct access to the HTML code.

Fortunately, there is a way to override inline styles from an external stylesheet:

strong[style] { color: blue !important; }

This will force the text in the strong tag to become blue in the example above. The method appears to work in all major browser, including:

• Internet Explorer 8.0
• Mozilla Firefox 2 and 3
• Opera 9
• Apple Safari, and
• Google Chrome

Internet Explorer 6 and 7 are the notable exceptions. However, this technique is not something you should use on a day-to-day basis. Keep your CSS clean and only override inline styles when there is absolutely no alternative.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Practical CSS.

Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?