How to Override Inline Styles from an External Stylesheet
All web developers know that by default, inline styles take precedence over styles in external stylesheets. For example, the following inline style declaration:
<span style="color: red;">Red text</span>Code language: HTML, XML (xml)will ensure the “Red text” is coloured red, even if the following is included in an external CSS file, or in the <head> styles:
span { color: blue; }Code language: CSS (css)Now it is generally not a good idea to use inline styles, as one should avoid mixing markup (responsible for the content and structure) with styles (responsible for the presentation format). Sometimes this is out of our control, for example if you are using a CMS which generates HTML with inline styles. In this case, how do you override these inline styles to ensure the page looks right?
(more…)