Override Link Color in CSS 1

[JohnBates]

hi HTMLers,

As you can see below, I have a class called "footer" in my css. I want these links to be a different color than other links on my site.

The css makes all links the color white...

A:link {color:white;text-decoration:underline}
A:visited {color:white;text-decoration:underline}
A:active {color:red;text-decoration:underline}

But I want the links in "footer" to be red.
***What do I need to do in "footer" within the css to override white and make just these links red ? (I dont want to use the style=color technique, there are too many pages).***

Thanks! John


<td class = "footer"><a href="index.html">Services We Offer</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="qualifications.htm">Qualifications</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="clients.htm">Some of Our Clients</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="about.htm">About Lone Star</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.htm">Contact Us</a></td>

 

[ChrisHirst]

give the links a different class

a.footer_links:link {
color:red;
}
a.footer_links:visited{
color:red;
}
a.footer_links:active{
color:red;
}
a.footer_links:hover{
color:red;
}
[code]



Chris.

Indifference will be the downfall of mankind, but who cares?
[URL unfurl="true"]www.candsdesign.co.uk[/URL] A website that proves the cobblers kids adage.
[URL unfurl="true"]www.cram-system.com[/URL] Nightclub counting systems

So long, and thanks for all the fish.

 

[manarth]

eeek! this'll mean changing every link in footer to add a class to every anchor: there is an easier way!

.footer a:link, .footer a:visited, .footer a:active { color: red; }

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Foamcow]

It's always a good idea to try and avoid classes if at all possible as your page structure will become much more independent of style.

Since the footer is a section of the page, you can make a division of it.

<div id="footer">
code for the footer section
links marked up with no styling info e.g.
<a href="mylink.html" title="link to another page">Link</a>
</div>

Then you can use CSS to apply a style to all link elements within "footer", for example:

#footer a:link { color:red; }

Taking this approach means that you can define styles for standard HTML elements that will only apply to "footer". This makes your page code alot lighter.

http://www.foamcow.com

"I'm making time

 

[JohnBates]

Thanks Foamcow in the UK !

Your solution was the easier to implement, so I went with it.

John in USA