How can I override inline styles with external CSS?
CssCss Problem Overview
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 */
}
Css Solutions
Solution 1 - Css
The only way to override inline style is by using !important
keyword beside the CSS rule. The following is an example of it.
<div style="font-size: 18px; color: red;">
Hello, World. How can I change this to blue?
</div>
div {
color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
> 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
Solution 2 - Css
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;
}
> Note: Using !important
ONLY will work here, but I've used
> div[style]
selector to specifically select div
having style
> attribute
Solution 3 - Css
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
Solution 4 - Css
<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/
Solution 5 - Css
used !important
in CSS property
<div style="color: red;">
Hello World, How Can I Change The Color To Blue?
</div>
div {
color: blue !important;
}
Solution 6 - Css
!important
, after your CSS declaration.
div {
color: blue !important;
/* This Is Now Working */
}
Solution 7 - Css
div {
color : blue !important;
}
<div style="color : red">
hello
</div>