How can I override inline styles with external CSS?

Question

I have markup that uses inline styles, but I don't have access to change this markup. How do I override inline styles in a document using only CSS? I don't 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 */
}

Flats

Also see CSS Cascade order – Brainsick

Answer 1

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

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 is not considered as a good practice. Hence, you should avoid both !important and inline style.

• Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.

• It even overrides the inline styles from the markup.

• The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.

• Must Read - CSS Specificity by MDN 🔗

Milburn

well that style part it up to him actually it is not necessary that he is using only for overriding the inline css – Milburn

i know but the same i am saying !important will only increase the score for specific property, he may be using other properties (not for overriding) in the some block – Milburn

Why is !important bad practice? – Reneerenegade

@BFDatabaseAdmin because you cannot override that later if you need for any special case – Milburn

Not inline, no, but inline is also bad practice. You can override !important in general by just having another !important later in the stylesheet. I think the real problem here is the OP shouldn't be using inline styles! – Reneerenegade

@BFDatabaseAdmin I agree inline styles should also be avoided, But the question was not that. – Milburn

Yes, fair point; though oftentimes the specific question asked doesn't address the underlying problem. E.g. my own question here - #21758573 - where the answer was basically "yes", but the solution was entirely different. – Reneerenegade

@BFWebAdmin the problem is that you sometimes dont have a choice. for example the "badge" from the new invisible recaptcha can be styled but has partially inline styles so you have to override them either like this or by js and a prefer a pure CSS solution. – Payson

but this way it breaks the font icons for instance font-awsome – Heathcote

!important reads not important to me. Very confusing, but does work and sometimes there is a 3rd party element that has written itself into the page and this is the only way. – Enchantress

Answer 2

inline-styles in a document have the highest priority, so for example say if you want to change the color of a div element to blue, but you've an inline style with a 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 I Use jQuery/Javascript? - Answer Is NO

We can use element-attr CSS Selector with !important, note, !important is important here, else it won't over ride 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 ONLY will work here, but I've used div[style] selector to specifically select div having style attribute

Flats

So, Should I Use Inline styles? - Answer Is NO :-) – Mixer

"So, Should I Use jQuery/Javascript? - Answer Is NO" Why? If I'm working in an environment (such as Sharepoint) where inline styles are added to elements by an uncontrollable entity why wouldn't I use Jquery to remove the offending inline styles so my sites external theme shows through? Seems a more precesion solution than blasting !important on a trait I might want to override in a specific instance later. – Frumenty

@Frumenty - Because JS can be blocked/turned off at the browser. Using !important cannot AFAIK. – Horodko

also js is imo bad in general, I mean do you open executable files sent by you from an unknown person? I guess not, but a browser does this with each click – Payson

Answer 3

You can easily override inline style except 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 have

<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 red only .. and you can not override it

Quartermaster

How is this any different from the answers that were added months before? – Reneerenegade

@BFDatabaseAdmin This answer is describing the behaviour when the inline style has !important, a point not covered by any of the other answers. This may not be a completely stand-alone answer but this is different to the other answers provided. – Enfilade

but then again using an inline style with important is really overkill since it by default has the highest priority anyway. – Payson

Answer 4

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

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

Psittacosis

Downvote because it doesn't work. – Mercurous

Answer 5

used !important in CSS property

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

div {
        color: blue !important;
    }

Caracul

Answer 6

!important, after your CSS declaration.

div {
   color: blue !important; 

   /* This Is Now Working */
}

Narton

Answer 7

div {
 color : blue !important;
}

<div style="color : red">
  hello
</div>

Leo