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;
Related
After styling my css I wanted to add a red background.
Problem is when I add the css to my body it doesn't apply to my page.
Could you tell me what's wrong and why?
You can find my code here: https://codepen.io/jardi/pen/RGNZJV
body {
background-color:red;
}
#pageTitle {
text-align:center;
font-family:Monospace;
color: rgb(51,22,225);
padding:50px;
font-size:30px;
}
.paraGraphs {
font-size:20px;
font-family:Times New Roman;
margin-left:50px;
margin-right:50px;
text-align:justify;
}
#bottom-image{
display: block;
margin: 0 auto;
}
In your jsFiddle, the background color is being overridden by the jsFiddle scaffolding here:
body {
background-color: #FFEEEE;
color: #004;
font-family: 'Roboto', sans-serif;
}
To test, you can add a !important to your CSS property value like this:
body {
background-color:red !important; /* Prototype code only, !important bad */
}
Outside of the jsFiddle, it's almost sure that something else is overriding your body background color (we can't see what). To find out, examine the "computed" CSS for the body element in browser dev tools, to see what.
Reference: Chrome Developer Tools: How to find out what is overriding a CSS rule?
Once you see what CSS rule is overriding your background, either remove the offending code, or make sure your selector has more specificity, for example my adding a class:
body.myClass {
background-color:red;
}
You have re-defined background-color for the body after that background-color: red;, so add !important, so it can not be overriden:
background-color: red!important;
I could solve it by using html body instead of body:
html body {
background-color:red;
}
According to the link that you attached, your code is using an external CSS:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
And inside this CSS already have an rule for body...
If you want, just add "!important" in the end of the line to force your color, example:
body {
background-color:red !important;
}
Codepen has a scaffolding css with that Bootstrap so it has a bg color of white ...If you do it out of this you will see it and you can doublecheck in codepen by just doing this:
body {
background-color: red !important;
}
But you wont need that !important
UPDATE
TO bypass your Bootstrap body bg just add a css file after that OR add inline like so:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="/css/yourfile.css" rel="stylesheet" />
<style>
body {
background-color:red;
}</style>
</head>
This is more of a theoretical question.
Is the stack of overrides for CSS ad-infinitum? For instance, is there always a CSS override for every override?
Lets say I have written this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
color: red;
}
/* Override it again */
div.a {
color: blue;
}
/* Again! */
body div.a {
color: yellow;
}
/* Again!! :) */
html body div.a {
color: yellow;
}
/* AND AGAIN!! */
html body div.a {
color: pink !important;
}
</style>
</head>
<body>
<div class="a">a</div>
</body>
</html>
Is !important combined with html body div.a the absolute highest level override for div.a?
Must there always exist something with a higher override?
In theory you can simply repeat a rule to increase the specificity.
.foo.foo.foo { }
In practise, browsers eventually treat a selector as having too many components and ignore it.
(There is also the style attribute, which is more specific than any selector)
inline styling with !important applied is the highest override I've ever used.
Example:
<div class="a" style="color: blue !important">a</div> Will override all other css applied
If you declare an inline style rule for div.a with the !important declaration it'll still override the rule declared in the <style> tag.
Any inline rule generally over-qualifies internally or externally declared styles, regardless of the number of selectors used to specify that rule. The only time an inline rule is over-qualified by internal or external styles is when the !important declaration is used - but if that declaration is used on an inline style you want to overwrite you'll be cursing.
In this case you'd need to apply some javascript to reset the attribute.
<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.
For example:
You have this:
<style type="text/css">
.myrule {
font-weight:bold;
}
</style>
<div class="myrule">
This text will bold but
</div>
<style type="text/css">
.myrule {
font-weight:normal; /* This code will affect the original .myrule */
}
</style>
What I need to know if is possible to "lock" CSS rules like this example:
<style type="text/css">
.myrule:locked {
color:yellow;
}
</style>
<div class="myrule">
This text will yellow always!!!!!!!
</div>
<style type="text/css">
.myrule {
color:red;
}
</style>
Not necessarily. You can use the !important operator to add an extreme weight to the CSS rule that will override pretty much anything else. However, another rule that is more specific that also has the !important operator will still override it.
Your best bet is not to try and "lock" CSS rules, per say, but to actually make sure that the rule's selector is always more specific than others. An ID selector is a great way to dominate specificity, and you will run into far fewer problems this way.
Try this :
.myrule {
font-weight:bold !important;
}
If it is possible to define an ID for your DIV tag, like
<div class="myrule" id="firstdiv">
This text will yellow always!!!!!!!
</div>
then you can specify your id specific CSS rule, like
<style type="text/css">
#firstdiv .myrule {
color:yellow;
}
</style>
I think css interpretation differs by browser. If you want to override css precedence, I think you need to use javascript to explicitly state your intent.
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.