On my web pages I want 2 different looks for links. Different colors/rollovers. It seems I can only create one CSS a:link to do this no optino for more?

Can someone tell me if there is a way?

Thanks<font face='Arial'></font id='Arial'>

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS&lt;/title&gt;
&lt;style type="text/css"&gt;

.link1 a:link
{ font-family: verdana;
color: #000000; text-decoration: none
}

.link1 a:visited
{
font-family: verdana;
color: #000000;
text-decoration: none
}

.link1 a:hover
{
font-family: verdana;
color: #ff0000;
text-decoration: none
}

.link1 a:active
{
font-family: verdana;
color: #000000;
text-decoration: underline
}



.link2 a:link
{ font-family: verdana;
color: blue; text-decoration: underline;
}

.link2 a:visited
{
font-family: verdana;
color: blue; text-decoration: underline;
}

.link2 a:hover
{
font-family: verdana;
color: #000000; text-decoration: underline;
}

.link2 a:active
{
font-family: verdana;
color: blue; text-decoration: underline;
}


&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;span class="link1"&gt;
&lt;a href="#"&gt;Link A&lt;/a&gt;&lt;br&gt;
&lt;a href="#"&gt;Link B&lt;/a&gt;
&lt;/span&gt;

&lt;br&gt;&lt;br&gt;
&lt;span class="link2"&gt;
&lt;a href="#"&gt;Link A&lt;/a&gt;&lt;br&gt;
&lt;a href="#"&gt;Link B&lt;/a&gt;
&lt;/span&gt;

&lt;/body&gt;
&lt;/html&gt;

thanks