PDA

Click to See Complete Forum and Search --> : link colors

sadman
07-06-2003, 10:49 AM
how can i have different colors for different links? i figured using javascript would be the easiest way to do it, but i can't really find out how. thanks for your guys help :)
David Harrison
07-06-2003, 11:19 AM
What you need is a good dollop of CSS.

In the head of your page have this:
<style type="text/css"><!--

a.red:link{color:#ff0000;}
a.red:visited{color:#ff0000;}
a.red:focus{color:#ff0000;}
a.red:hover{color:#ff0000;}
a.red:active{color:#ff0000;}

a.blue:link{color:#0000f;}
a.blue:visited{color:#0000ff;}
a.blue:focus{color:#0000ff;}
a.blue:hover{color:#0000ff;}
a.blue:active{color:#0000ff;}

--></style>

and wherever you want a red link have this:
<a href="#" class="red">Red Link</a>

and for a blue link:
<a href="#" class="blue">Blue Link</a>

in case you're wondering why you need so much code at the top, you don't. This is what the code does:

:link is just the color of the link.
:visited is the color of a link that has been used.
:focus is the color the link is if it is selected via the keyboard (ie: the tab key).
:hover is the color of the link when the mouse hovers over it.
:active is the color of the link when it is being clicked.

if you don't want all of this then just replace the code with:
a.red{#ff0000;}
a.blue{#0000ff;}
Charles
07-06-2003, 11:23 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
a {display:block}
a#one {color:#008}
a#two {color:#800}
-->
</style>
<div><a href="http://www.w3.org/TR/REC-CSS1" id="one">CSS1</a><a href="http://www.w3.org/TR/REC-CSS2" id="two">CSS2</a></div>