Embedded CSS doesn't overwrite CSS in linked stylesheet

Question

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    
}

w3.org/TR/CSS21/cascade.html#specificity

C3roe
– C3roe

2013-09-30 11:06:13 +00:00
Commented Sep 30, 2013 at 11:06 — C3roe
– C3roe, Commented Sep 30, 2013 at 11:06
Solved, thanks to everyone !

qadenza
– qadenza

2013-09-30 11:10:53 +00:00
Commented Sep 30, 2013 at 11:10 — qadenza
– qadenza, Commented Sep 30, 2013 at 11:10

Marc Audet · Accepted Answer · 2013-09-30 11:06:22Z

2

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.

answered Sep 30, 2013 at 11:06

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davidkonrad · Accepted Answer · 2013-09-30 11:06:25Z

1

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

answered Sep 30, 2013 at 11:06

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2013-09-30 11:07:35Z

1

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

answered Sep 30, 2013 at 11:07

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Marc Audet Over a year ago

!important is not required, just make the selector more specific. Overusing !important leads to style sheets that can be hard to maintain, especially for complex rule sets.

score 1 · Accepted Answer · 2013-09-30 11:13:08Z

1

In this case You have to use !important

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

edited Sep 30, 2013 at 11:13

answered Sep 30, 2013 at 11:07

user2767715

2 Comments

Marc Audet Over a year ago

!important is not required, just make the selector more specific. Overusing !important leads to style sheets that can be hard to maintain, especially for complex rule sets.

user2767715 Over a year ago

+1 ...Yes, using more specific selector also method. I agree with you.

Adam Botley · Accepted Answer · 2013-09-30 11:09:01Z

0

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

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

answered Sep 30, 2013 at 11:09

Adam Botley

7027 silver badges15 bronze badges

Collectives™ on Stack Overflow

Embedded CSS doesn't overwrite CSS in linked stylesheet

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related