I have four colums on this page. They are actually div layers, but they look like colums.
I want to be able to have the coloring of each colum a diferent color. Not just the text, but the links as well. Is there a way to set the link color in each layer? I am sure that I have seen it done before.

the url is http://www.beautiful-friend.net/oldstuph/test.html if you would like to see what I am talking about.

Make id's in the CSS codes at the top of the page like so...


<style type="text/css">
<!--
#DIV1 {
background-color:#942245;
color:#000000;
a:hover {
text-decoration:none;
color:#336699
}
-->


That way anything that is inside that class will have whatever elements you want to put in there.


<div id="div1">Text</div>

This is what I used.

#monent {
position:absolute;
padding: 0px;
top:45px;
left:239px;
width:200px;
border:1px solid #FF00FF;
font:11px verdana;
font-weight:normal;
color:#FF00FF;
padding:10px;
margin-bottom:50px;
background-color: #ffffff;
A:link
{ text-decoration: none; c
olor:#000000;}
A:visited
{ text-decoration: line-through;
color:#FF00FF;}
A:active
{ text-decoration: underline;
color:#FF00FF;}
A:hover
{ text-decoration: none;
color:#000000 ; background-color:#FF00FF;}
}

I get no color coding for links at all now

this is what I did


A:link.yellow {color: #FFFF00; text-decoration:none; }
A:link.pink {color: #FF00FF; text-decoration:none; }
A:link.blue {color: #0000FF; text-decoration:none; }
A:link.green {color: #00FF00; text-decoration:none; }

A:visited.yellow { text-decoration: line-through; color:#FFFF00;}
A:visited.pink { text-decoration: line-through; color:#FF00FF;}
A:visited.blue { text-decoration: line-through; color:#0000FF;}
A:visited.green { text-decoration: line-through; color:#00FF00;}

A:active.yellow { text-decoration: underline; color:#FFFF00;}
A:active.pink { text-decoration: underline; color:#FF00FF;}
A:active.blue { text-decoration: underline; color:#0000FF;}
A:active.green { text-decoration: underline; color:#00FF00;}

A:hover.yellow { text-decoration: none; color:#000000; background-color:#FFFF00;}
A:hover.pink { text-decoration: none; color:#FFFFFF; background-color:#FF00FF;}
A:hover.blue { text-decoration: none; color:#FFFFFF; background-color:#0000FF;}
A:hover.green { text-decoration: none; color:#000000; background-color:#00FF00;}


then I added the appropriate class="blahblah" to the corresponding link.

<A HREF="http://www.beautiful-friend.net/" TARGET="new" class="yellow">http://www.beautiful-friend.net/</a>.

my friend had to break it down for me. its not that complicated now that I understand it.