Style sheets question

[FOBSIDE]

I'm trying to write .css file so I can have multiple variations of links. The problem occurs when I add the following code:
A:link { color: #0000FF; text-decoration: none;}
A:active { color: #0000FF; text-decoration: none;}
A:visited { color: #0000FF; text-decoration: none;}
A:hover { color: #666666; text-decoration: none;}

When I use this code, all the links get defaulted to blue with gray mouseover. I want the menu to have different colored links/mouseover colors. Does anyone know how to do this?

Thanks for any help.

 

[GagHalfrunt]

Originally posted by: FOBSIDE
I'm trying to write .css file so I can have multiple variations of links. The problem occurs when I add the following code:
A:link { color: #0000FF; text-decoration: none;}
A:active { color: #0000FF; text-decoration: none;}
A:visited { color: #0000FF; text-decoration: none;}
A:hover { color: #666666; text-decoration: none;}

When I use this code, all the links get defaulted to blue with gray mouseover. I want the menu to have different colored links/mouseover colors. Does anyone know how to do this?

Thanks for any help.

Sure, you've got the same color set for all 3 link states. Change the #0000FF to the codes for other colors.

A:link { color: #0033FF; text-decoration: none}
A:active { color: #FF0000; text-decoration: none}
A:visited { color: #66FF33; text-decoration: none}
A:hover { color: #666666; text-decoration: none}

That'll make the links blue when unclicked, red while being clicked and green after having been visited.

 

[FOBSIDE]

I should have clarified my question. I want to have different links with different colors and different mouseovers. I know that defining local stylesheets can overwrite the global stylesheets, but I'd rather not write both local stylesheets and global stylesheets.

 

[GagHalfrunt]

Oh, if you mean different colors on the same page, yes, but you need to differentiate the areas with either SPAN or DIV. Set up an area named div1, another named div2, etc and use:

A:LINK {
font-family : verdana, arial, trebuchet ms, helvetica, sans serif;
font-size : 9pt;
font-weight : bold;
text-decoration : none;
color : blue;
}
A:VISITED {
font-family : verdana, arial, trebuchet ms, helvetica, sans serif;
font-size : 9pt;
font-weight : bold;
text-decoration : none;
color : #BF00BF;
}
A:HOVER {
font-family : verdana, arial, trebuchet ms, helvetica, sans serif;
font-size : 9pt;
font-weight : bold;
font-style : normal;
color : Red;
}
.div1 A:link {
color: #ffffff;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
text-decoration: none;
}
.div1 A:visited {
color: #CCCC66;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
text-decoration: none;
}
.div1 A:hover {
color: #000040;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
background: #FFFFFF;
}
.div2 A:link {
color: #336699;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
text-decoration: none;
}
.div2 A:visited {
color: #D3D3D3;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
text-decoration: none;
}
.div2 A:hover {
color: #00FF00;
font-size : 9pt;
font-family : arial, verdana, trebuchet ms, sans serif;
font-weight : bold;
background: #FFFFFF;
}

etc etc

 

[FOBSIDE]

Thanks. I'll try that out.

 

[FOBSIDE]

That doesn't seem to work. How am I supposed to implement that?

 

[FOBSIDE]

This works.

.div1:hover {...}

You have to remove the 'A' from the definition in the style sheet.

 

[Barnaby W. Füi]

No, then you're changing the color of everything in the div.

Make a div with a class:

<div class="foobar">
<a href="whatever">here's my link!</a>
(more links here or whatever)
</div>

Then in css do:

div.foobar a:hover { color: whatever; }
div.foobar a:visited { color: whatever; }

 

[Bullhonkie]

Or if you want to be able to change it per link easily, define classes for your anchor tag:

A.blue {text-decoration: none;color: #00F;}
A.green {text-decoration: none;color: #0F0;}
A.red {text-decoration: none;color: #F00;}

Then for your links use:

<a class="blue" href="http://blah.com">This link is blue</a>
<a class="green" href="http://blah.com">This link is green</a>
<a class="red" href="http://blah.com">This link is red</a>