Overriding Inline css style definitions.
One of the most powerful features of CSS is the cascading. Knowing how a browser chooses and applies your styles is invaluable knowledge. There are various methods to apply css to an element.
External Style Sheets – All css will written in separate file and include in html
Embedded Style Sheets – write all css in a <style > </style > block in the html page.
Inline Styles – In the html tag we will specify the css like style=”color:red”
Inline styles have the highest priority of all CSS. In general, we should not avoid using them and place your CSS declarations in external files. However, sometimes it is not possible.
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 page. 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.
More Details: http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/
Filed under: Css
