How to Override Inline CSS Styles

This is not new stuff, but anyway I decided it to re-post it for others.

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.

inline style that should be blue
.

nline 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.