How can I override an inline CSS rule with using an external stylesheet file?
This is my HTML code:
<div class="mydiv" style="background:#000"> lorem ipsom</div>
I want to change the background color using CSS. This is my CSS code:
.mydiv {background:#f00; color: #000;}
But this is not working, but I this is possible.
Is there a way to change the background color in Internet Explorer?
This is very simple. Use !important after your rule style. Here is the example:
.mydiv {background:#f00 !important; color: #000;}
URL: http://jsfiddle.net/msJxL/
And for Internet Explorer, check out How To Create an IE-Only Stylesheet | CSS-Tricks.
Inline style is treated as having a higher specificity than any rule-set.
The only ways to override it are to change it on the element or use an !important rule.
!important rules are a sledgehammer of a solution and only work once (if you want to override again, you are stuck; there is no such thing as a double !important rule), so changing the style attribute value (preferably removing it entirely in favour of a stylesheet) is the best option.
If you really want to use !important then the syntax is:
.mydiv {
background:#f00 !important;
color: #000;
}
Use the !important for this. It will override other CSS. Try the following code:
.mydiv {background:#f00 !important; color: #000;}
Use this:
.mydiv {
background: #f00 !important;
/* This will increase the rule score */
color: #000;
}
Detailed information: Stack Overflow question How can I override inline styles with external CSS?.
You can use the CSS attribute selector:
<style>
div[style] {
background: blue !important;
}
</style>
<div style="background: red;">
The inline styles.
</div>
Related
I have included first Materialize's CSS and then I have linked my css file.
In which I have an example class that sets background-color property to red, but that doesn't override the default color (that's set by materialize-css).
Here's an example:
https://jsfiddle.net/79ss2eyr/1/
I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors.
Here's what the inspector says:
How should I do that and why my css properties do not override materialize's since it's linked after the framework?
Inn Materialize's the rule is set by footer.page-footer {}, but you're wrote just .app-bg. So you can't override the Materialize's rule.
If u want to override that class you can use footer.app-bg or use !important:
footer.app-bg {
background-color: red;
}
or
.app-bg {
background-color: red !important;
}
Make the css selector more specific, like this:
footer.app-bg {
background-color: red;
}
If your css is not applying to the element because of other applied css just use !important to specify that your css is important.
.app-bg {
background-color: red !important;
}
Example : https://jsfiddle.net/79ss2eyr/2/
This is my css file, till now I have made a simple navigation bar.
But the point is for my <a> elements in the navigation bar, when I try to style them both in case a and a:hover they work only when I give !important. What is happening. Is there a specificity issue ?
#import url('http://fonts.googleapis.com/css?family=Lato');
.navbar {
background-color: #b6b5b4;
border-style: solid;
}
.container {
background-color: #bfbfbf;
}
body {
font-family: Lato;
}
a {
color: black !important;
font-weight: bold;
}
.navbar-right {
background-color: #aeaeae;
}
a:hover {
background-color: #dfdfdf !important;
}
I am new to css and html.
You imported Bootstrap, which has default CSS styling. What you're basically doing, is trying to overwrite those styles. However, Bootstrap seems to be taking precedence over your CSS (probably due to the order of the imports in your HTML file), thus requiring !important. The !important tag makes sure that, that particular style cannot be overwritten or, is always displayed over others.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
If your ordering is like this, Bootstrap styling will be displayed, unless you use !important.
What is happening is parent divs like .container (may be, dont have your html structure) is having background-color css. This css will override the hover css on child <a> element. !important keyword is made only for this purpose. It does not allow other styles to override itself. Thats why you should use !important keyword in such cases.
a:hover { background: #dfdfdf !important;}
use this one
You have default css file with styles with its nesting! quick fix for this issue: assign class for <a> with your styles!
a.my-class {
color: black;
font-weight: bold;
}
a.my-class:hover {
background-color: #dfdfdf;
}
Yes, If u give like this
a {
background-color: black !important;
}
!important overrides the hover state styles also.
a {
background-color: dfdfdf;
}
doesn't work.
give your style like this
a {
background-color: black;
}
//remove !important
remove !important from <a> tag. Hover state works normally.
Let me know if u get any errors.
Is there any way to override inline CSS without using !important and without using JavaScript?
For example:
<div style="background-color: red;"></div>
I was wondering if it can be overridden without:
div {
background-color: blue !important;
}
No, inline style takes precedence, you can override it only with !important.
I'm afraid the !important clause is specifically created as the solution for this. It would be impractical for CSS to implement different degrees of priority, apart from the now-used
style block < inline < !important
priority.
Try this:
div[style] {
background: blue !important;
}
This question already has answers here:
How to override !important?
(12 answers)
Closed 2 years ago.
What I am trying is setting this CSS on element:
background: red !important;
But when I try to do this:
background: yellow;
it still only shows the red and not the yellow for that one field as I would like it to be (I am not using external CSS).
What I am asking is how to override it, is it possible?
Ans is YES !important can be overridden but you can not override !important by a normal declaration. It has to be higher specificity than all other declarations.
However it can be overridden with a higher specificity !important declaration.
This code snippet in Firefox's parser will explain how it works:
if (HasImportantBit(aPropID)) {
// When parsing a declaration block, an !important declaration
// is not overwritten by an ordinary declaration of the same
// property later in the block. However, CSSOM manipulations
// come through here too, and in that case we do want to
// overwrite the property.
if (!aOverrideImportant) {
aFromBlock.ClearLonghandProperty(aPropID);
return PR_FALSE;
}
changed = PR_TRUE;
ClearImportantBit(aPropID);
}
Good read
Specifics on CSS Specificity
CSS Specificity: Things You Should Know
Here's an example to show how to override CSS
HTML
<div id="hola" class="hola"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{ background-color:red !important; }
#hola{ background-color:pink !important;}
and output will be
Also we can not override inline !important
HTML
<div id="demo" class="demo" style="background-color:yellow !important;"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{ background-color:red !important; }
#demo{ background-color:pink !important;}
the output is
As described in w3 spec, !important declarations do not alter the specificity, but rather take precedence over "normal" declarations. Effectively, such declarations only "compete" between themselves - thus, you can override yours with another !important declaration of higher specificity:
/*
these below are all higher-specificity selectors and, if both
rules are applicable to the same element, background colour
will be set to "yellow":
*/
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}
There is also the declaration order to consider - a declaration further down in the CSS will take precedence over an earlier one if their selectors have the same specificity.
A case worth noting is when it clashes with an inline declaration. Counterintuitively (but fully in line with the spec), the !important value will come out on top! This means that if you have
<style>
#secret-container {display:none !important;}
</style>
<script>
$('#secret-container').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>
the div in question will remain hidden! The only way to have an inline rule take precedence over an !important one is, well, by applying !important to it as well. I'll let you be the judge of how good a practice that is ಠ_ಠ
There's no overriding inline !important though.
!important will override background: yellow; Try to avoid using !important. Take a look at css specificity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.
I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.
How do I mark the style of C as the strongest?
Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.
Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
div.a, div.b {
background-color: #00f;
}
div.c {
background-color: #f00 !important;
}
The !important will up priority of rule and inheritance will be ignored.
div.a, div.b, div.c {
background-color: #00f;
}
div.c {
background-color: #f00;
}
should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example
body div.c {
background-color: #f00;
}
!important should work just fine, but if not you can chain your classes in your declaration like so:
div.a.c,div.b.c,div.a.b.c
{
color:red
}