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 */
}

Also see [CSS Cascade order](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#complete_cascade_order) — djvg, May 09 '23 at 12:17

score 234 · Accepted Answer · edited Jan 05 '21 at 14:22

234

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

edited Jan 05 '21 at 14:22

Abdullahi Abdulkabir

163
2
5

answered May 29 '13 at 11:58

Rohit Agrawal

5,372
5
19
30

1

well that style part it up to him actually it is not necessary that he is using only for overriding the inline css – Rohit Agrawal May 29 '13 at 12:07
1

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 – Rohit Agrawal May 29 '13 at 12:11
Why is !important bad practice? – Sinister Beard Mar 03 '14 at 10:51
1

@BFDatabaseAdmin because you cannot override that later if you need for any special case – Rohit Agrawal Mar 04 '14 at 07:58
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! – Sinister Beard Mar 04 '14 at 08:14
@BFDatabaseAdmin I agree inline styles should also be avoided, But the question was not that. – Rohit Agrawal Mar 04 '14 at 10:05
Yes, fair point; though oftentimes the specific question asked doesn't address the underlying problem. E.g. my own question here - http://stackoverflow.com/questions/21758073/when-inserting-data-from-a-query-to-a-table-does-the-query-run-for-each-record - where the answer was basically "yes", but the solution was entirely different. – Sinister Beard Mar 04 '14 at 10:11
2

@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. – My1 Dec 13 '16 at 10:55
but this way it breaks the font icons for instance font-awsome – Asrar Ahmad Ehsan Oct 30 '22 at 05:21
`!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. – rob Jan 05 '23 at 10:24

score 39 · Answer 2 · edited May 29 '13 at 14:09

39

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

edited May 29 '13 at 14:09

Ja͢ck

170,779
38
263
309

answered May 29 '13 at 11:56

Mr. Alien

153,751
34
298
278

2

So, Should I Use Inline styles? - Answer Is **NO** :-) – PeeHaa May 29 '13 at 14:11
"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. – Neberu Mar 06 '15 at 00:49
2

@Neberu - Because JS can be blocked/turned off at the browser. Using `!important` cannot AFAIK. – Tony Mar 07 '15 at 21:13
1

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 – My1 Dec 13 '16 at 10:57

score 12 · Answer 3 · answered Jun 24 '13 at 11:08

12

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

answered Jun 24 '13 at 11:08

IE kills stay away from it

184
1
12

1

How is this any different from the answers that were added months before? – Sinister Beard Sep 11 '14 at 07:49
7

@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. – grg Apr 07 '15 at 18:08
but then again using an inline style with important is really overkill since it by default has the highest priority anyway. – My1 Dec 13 '16 at 10:58

score 5 · Answer 4 · answered Aug 26 '14 at 06:37

5

<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/

answered Aug 26 '14 at 06:37

jroi_web

1,992
22
23

Downvote because it doesn't work. – Dev Jan 06 '22 at 12:53

score 0 · Answer 5 · answered Dec 26 '19 at 09:24

0

used !important in CSS property

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

div {
        color: blue !important;
    }

answered Dec 26 '19 at 09:24

Vishal Vaghasiya

1,857
2
14
21

score 0 · Answer 6 · edited Nov 06 '20 at 15:13

0

!important, after your CSS declaration.

div {
   color: blue !important; 

   /* This Is Now Working */
}

edited Nov 06 '20 at 15:13

shreyasm-dev

2,711
5
16
34

answered Nov 06 '20 at 12:55

fruitloaf

1,628
15
10

Syed Akhter · Answer 7 · 2021-09-03T10:13:14.237

0

div {
 color : blue !important;
}

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

edited Sep 03 '21 at 10:13

answered Mar 29 '21 at 09:03

Syed Akhter

37
4

How can I override inline styles with external CSS?

7 Answers7

Linked

Related