<head>
<link href="index.css" rel="stylesheet">
<style>
#amor_di_mundo{
color:#ffffff;
}
</style>
</head>
<body>
<div id='divL'>
<div id='amor_di_mundo'>Amor di Mundo</div>
<div id='quem_boe'>Quem Boe</div>
</div>
index.css
#divL div{
color:#800000;
}
In index.css a div (#amor_di_mundo) is styled with color:800000
In a specific file I need to overwrite it with color:#ffffff but it's not overwritten !
The problem is with css specificity: a inline style has more power than an external file. Use the same selector, and move the inline styles in a default stylesheet, then add your new styles in a desired file and load first the default stylesheet, then the second stylesheet that you want to overwrite with
The css would need to follow the same rule. So it would need to be
#divL div {
color: #ffffff;
}
You could mark it as important to get around this:
#amor_di_mundo {
color: #ffffff !important
}
As #divL div is more specific than #amor_di_mundo.
You need to apply either color: #ffffff !important to or write css like this:
#divL #amor_di_mundo{
color:#ffffff;
}
I think you need to put the syle attribute not in header but where the element is in the body itself. The syntax to follow is:
Style="color:#ffffff;"
Add it to the opening tag of the element.
Related
I wonder is it possible to dereference a CSS file referenced earlier in the HTMl page.
I'm asking because I'm responsible for part of the page, the framework rendering the whole page references some CSS file in the format of
<link rel="stylesheet" type="text/css" href=XXX.css>
And this CSS file is overwriting my CSS file, so I wonder if I can dereference it or is there any other suggestions?
Thanks a lot.
Instead of trying to remove that file try putting more specific CSS rules:
[parent.css]
a {
color: red;
}
[your_file.css]
body a {
color: blue;
}
CSS always applies on entire document.
The way you can do for only one div is just define a unique id or class to your div you want to write css for.
<div class="main_div" id="myCss">
//further content like h1, div, ul, li
</div>
And now when you write css just inherit all the css like this
#myCss h1{
// mycss
}
#myCss ul li{
// mycss
}
This way css will be applied only on your div.
I want to overwrite background and font color of a link.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link href="index.css" rel="stylesheet"/>
<style>
#abc{
background:#ffffff; // doesn't work
color:#008080; // doesn't work
}
</style>
</head>
<body>
<?php include 'inc/menum.php';?>
menum.php
<div id="divL">
<a href='abc.php' id='abc'>ABC</a>
<a href='universe.php' id='universe'>UNIVERSE</a>
<a href='strel.php' id='strel'>STREL</a>
</div>
index.css
#divL a{
background:#008080; // works
color:#ffffff; // works
}
You have a specificity issue.
The #divL a selector is more specific than #abc.
You could easily use #divL #abc and that would make the embedded rule more specific.
Use background-color and :link
#abc{
background-color :#fff;
}
#abc:link {
color:#008080;
}
instead. :link is the appropriate subclass here. color will only change the general color of the <div>, eg the content that is not anchor text..
Yeah! you have said that #divL a{....} works because it is selecting more specificity by selecting parent div if you can't override by just #abc{....} then you could place !important at last like this
#abc{
background:#ffffff !important;
color:#008080 !important;
}
Even if it is not working you should try by selecting more specificity div that is you have declared that #divL a is works
and if anytime if selecting even parent div doesn't work then you could use body selector like this
body #abc{
background:#ffffff;
color:#008080;
}
Also one hint for you if you would like to set background color then use background-color than background
In this case You have to use !important
#abc{
background:#ffffff !important;
color:#008080 !important;
}
use !important to force the browser to give this value priority
E.g. background-color: red !important;
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>
The W3C Recommendations defines the ability to select any anchor which has a defined class by using A[CLASS]{/*Code*/}, but is there an antecedent?
Can I select all anchors that do NOT have a class?
My instinct is to use A[~CLASS]{/*Code*/}, but that isn't documented, and A[CLASS=]{/*Code*/} selects all anchors which have a class name which is an empty string (for instance, <A CLASS="" HREF="http://example.com/">This anchor has a class, but it's empty.</A>).
Example usage
In this code, I only want classless links to be green.
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://example.com/externalUneditableStyles.CSS" />
<STYLE>
A.deadLink{
color:#FF0000 !important;
}
A{
color:#00FF00;
}
</STYLE>
</HEAD>
<BODY>
This link is red, as specified by the CSS above.
This link is green, as specified by the CSS above.
This is a link to a child page, and is styled by external uneditable CSS. That CSS doesn't specify a color, so it is green, even though that might not be the intended effect.
</BODY>
</HTML>
Use something like this:
a:not([class]) {
/*some styling here*/
}
Little demo: little link.
That's exactly what cascading is for, if you do:
a { color: #000; } /* this targets all anchors */
Then after this in your stylesheet you can do
a.classname { color: #ffcc00; } /* to override the color for the once with the classname class defined. */
I hope that's clarifies your question.
Try to play with the .foo:not(.bar)-pseudo selector. I also advise you not to code tags in caps. I believe it is allowed in HTML5, but not in XHTML. Even so, the practice is frowned upon.
i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.