How can I override inline styles using external CSS?

Question

I have a markup that uses inline styles, but I do not have access to change this markup. How to override inline styles in a document using only CSS? I do not want to use jQuery or JavaScript.

HTML:

<div style="font-size: 18px; color: red;"> Hello World, How Can I Change The Color To Blue? </div> 

CSS

 div { color: blue; /* This Isn't Working */ } 

Answer 1

Only to override the inline style, the !important keyword is used next to the CSS rule. Below is an example of this.

 div { color: blue !important; /* Adding !important will give this rule more precedence over inline style */ } 

 <div style="font-size: 18px; color: red;"> Hello, World. How can I change this to blue? </div> 

Important notes:

• Using !important not considered good practice . Therefore, you should avoid both !important and inline style.

• Adding the !important keyword to any CSS rule allows the rule to forcefully precede all other CSS rules for this element.

• It even overrides inline styles from markup.

• The only way to override is to use another !important rule , declared either with a higher CSS specificity in CSS or with a lower degree of CSS specificity in the code.

• Must Read - CSS Specific MDN 🔗

Answer 2

inline-styles in the document have the highest priority, for example, say you want to change the color of the div element to blue , but you have an inline style with the color property set to red

 <div style="font-size: 18px; color: red;"> Hello World, How Can I Change The Color To Blue? </div> 

 div { color: blue; /* This Won't Work, As Inline Styles Have Color Red And As Inline Styles Have Highest Priority, We Cannot Over Ride The Color Using An Element Selector */ } 

So, should jQuery / Javascript be used? - No answer

We can use element-attr CSS Selector with !important , note that !important is !important here, otherwise it will not move the inline styles.

 <div style="font-size: 30px; color: red;"> This is a test to see whether the inline styles can be over ridden with CSS? </div> 

 div[style] { font-size: 12px !important; color: blue !important; } 

Demo

Note. Using !important will ONLY work here, but I used div[style] to select a div having a style Attribute

Answer 3

You can easily override the inline style besides the inline !important style

So

 <div style="font-size: 18px; color: red;"> Hello World, How Can I Change The Color To Blue? </div> div { color: blue !important; /* This will Work */ } 

but if you

 <div style="font-size: 18px; color: red !important;"> Hello World, How Can I Change The Color To Blue? </div> div { color: blue !important; /* This Isn't Working */ } 

now it will be only red .. and you cannot override it

Answer 4

 <div style="background: red;"> The inline styles for this div should make it red. </div> div[style] { background: yellow !important; } 

Below is a link for more details: http://css-tricks.com/override-inline-styles-with-css/