Having Different Coloured Links

Hey guys,

I've just discovered how to make my link text change when it is scrolled over and all that fun stuff using CSS. Now I'm wondering how to have different sets of links do different things.

For example I have a menu on the left of my page where links are dark red but have a menu at the bottom of my page with a black background and want to have my links here white or some other light colour.

Thanks for any help!
Kirsty

 

You just set them up as a different class in the css.

 

use something like this in your css stylesheet

a.botlink, a.botlink:visited, a.botlink:active { color:#FFFFFF;}
a.botlink:hover { color:#CDCDCD; }

then make your links look like this

<a href="link.php" class="botlink">link text</a>

 

Thanks! So do I just leave my other link colour as is and add that as my second link colour? What if I want three?

 

yes.

if you want another copy the above code and just change the class

a.link3, a.link3:visited, a.link3:active { color:#FFFFFF;}
a.link3:hover { color:#CDCDCD; }

then make your links look like this

<a href="link.php" class="link3">link text</a> ETC ETC

 

Great! Thanks for that!

 

no problem

 

Also, if you are using divisions or specific tables for links you can change the links in that particular section. This way you don't need to add a class to each link.

#mydiv a {color:#FFFFFF; text-decoration:none;}
#mydiv a:hover {color:#FFFFFF; text-decoration:underline;}

or 

table td table td a {color:#FFFFFF; text-decoration:none;}
table td table td a:hover {color:#FFFFFF; text-decoration:underline;}

Code (markup):

<div id="mydiv">

<a href...
<a href...

</div>

or

<table>
<tr>
<td>

<table>
<tr>
<td>

<a href...
<a href...