css (again!) proper method?

Hi, im stuck again, although i can get it to work in a poor manner i want to do it properly, all im trying to do is have a css file tell my page what hover link colours to do etc and have two types. but i dont know how to put too types into the css file because of the brackets

ie, say it was called .a1 then if it has nothing in its:

.a1 {}

So i want to add
[code]
a.:link { color: #666666; background-color: transparent; text-decoration: underline;}
a.:visited { color: #666666; background-color: transparent; text-decoration: underline}
a.:active { color: #666666; background-color: transparent; text-decoration: underline}
a.:hover { color: #3E549F; background-color: transparent; text-decoration: underline}[/code]

The problem is i want to add .a2 as well, its currently like this:


[code].a1
a.:link { color: #666666; background-color: transparent; text-decoration: underline;}
a.:visited { color: #666666; background-color: transparent; text-decoration: underline}
a.:active { color: #666666; background-color: transparent; text-decoration: underline}
a.:hover { color: #3E549F; background-color: transparent; text-decoration: underline}

.a2
a.:link { color: #FFFFFF; background-color: transparent; text-decoration: none;}
a.:visited { color: #FFFFFF; background-color: transparent; text-decoration: none}
a.:active { color: #FFFFFF; background-color: transparent; text-decoration: none}
a.:hover { color: #3E549F; background-color: transparent; text-decoration: none}[/code]


But that doesnt seem to work im using dreamweaver 4 and in the html im using dreamweaver to select text then im going to the menu (text>css styles>a1 etc) to choose the style.

http://www.teamphotoshop.com/web_design/articles/anchor_pseudo.php

oh ta

The order is also important.

Hello roy_uk,
Another option is to set your second set of links with a class selector like this:

/* Standard anchor tag formatting */
A:link {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
text-decoration: underline; }
A:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
text-decoration: underline; }
A:hover {
color: #6C6E6B;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
text-decoration: underline;}
A:active {
color: #6C6E6B;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
text-decoration: underline;}
/* End standard anchor tag formatting */

/* Formatting for menu items */
A.menu:link {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none; }
A.menu:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none; }
A.menu:hover {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: underline;}
A.menu:active {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: underline;}
/* End formatting for menu items */

The first set will work on any anchor tags, and second (or third, you can have as many as you want, just change the class selector) just add class="menu" to your anchor tag like this:
[a href="blah.html" class="menu"]blah[/a] (replace [] with <>).

I hope this helps, if you need any more explenation you can just post your question, e-mail me, or check out the code on my site.