CODEWITHSUNDEEP
htmlcss
qadenza
qadenza

Reputation: 9293

Embedded CSS doesn't overwrite CSS in linked stylesheet

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    
}

Upvotes: 0

Views: 128

Answers (5)

user2767715
user2767715

Reputation:

In this case You have to use !important

#abc{
    background:#ffffff !important;
    color:#008080 !important;
}

Upvotes: 1

Adam Botley
Adam Botley

Reputation: 702

use !important to force the browser to give this value priority

E.g. background-color: red !important;

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

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

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85578

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

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 2

Related Questions