Multiple Links per page

color change not working

[Lorel]

I have spent several hours trying to figure out this link bug, experimenting and testing. I have 4 different link styles on a page (default links, leftmenu links, extra small links under pictures and links in footer). Everything is working except for the footer links are picking up the default links blue color instead of being gray. I haven't included the CSS for the other two as I have removed those temporarily and it doesn't change anything so I think it has something to do with default links.

Can anyone see a problem with my code?

Here is the CSS for the default links

/* default links w base font 16px */
a:link, a:visited {
color: #6495ED; /*light blue*/
font-weight: bold;
background: transparent;
text-decoration: none;
font-size:100%; }
a:hover {color: #37678E; } /*dark blue*/

Here is the CSS for the footer links:

a#footer:link, a#footer:visited {
color: #999; /* med gray*/
font-weight: bold;
background:transparent;
text-decoration: underline;
font-size:90%; }
a#footer:hover {
color:#ccc; } /*light gray */

[Lorel]

PS. here is the HTML for the footer:

<div id="footer">
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</div>

[Fotiman]

a#footer:link, a#footer:visited {

should be:

#footer a:link, #footer a:visited {

[lucy24]

More stuff: (because Fotiman instantly homed in on the probable answer to your main question)

font-weight: bold;
background:transparent;

You don't need to say this over again (in the special-case CSS for links in the footer) unless you're still fiddling with the overall styles and you think you might end up having the footer links look different from the default links. In which case, remember to delete any redundancies before you go live. Anything that isn't different will be inherited.

Not sure why you need to say "background: transparent" at all, because what else would it be? Transparent is the default. If some containing element-- such as the overall footer-- has a background-image or fancy background-color, that isn't inherited.

[Lorel]

@Foitman. thanks. Your suggestion worked. I thought I had to put the anchor first. when there are multiple links on a page (according to an article I found). I had it the other way around at first and it didn't work.

@Lucy24 Thanks for the reminder re the redundant code.

[lucy24]

I thought I had to put the anchor first.

It's not so much about what goes first, as what's inside of what.

a#footer = an <a> element whose own id is "footer"
#footer a = any <a> element inside of some other element whose id is "footer"

An id has to be unique. So you can only have one "a id = 'footer'" per page, but if you have "div id = 'footer'" you can put lots of <a>s inside it.

[keyplyr]

It also took me a while to get the concept of Cascading.