Different colored links on same page...how?

[eelhandroll]

I'm having a problem getting links to show up as different colors. Every time I make a change, ALL the links on the page change to that new color.

I want to keep the top links in the existing red color. But if you scroll down the page there are 3 links that I want to change to the color black.

The existing style (that shows red) is as follows:

.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}
a:link {
color: #FF0000;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #FF0000;
}
a:active {
color: #FF0000;
}

I tried adding another style to the html page as follows:

.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}

I then referenced those 3 links with "style2" instead of "style1"....that changed those links to the color black, BUT it ALSO changed the top red links to the color black as well!

Help!

[edited by: mack at 3:09 pm (utc) on Nov. 24, 2004]
[edit reason] removed specifics [/edit]

[mm1220]

What you want is:

.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}

a.style1:link {
color: #FF0000;
}

.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}

a.style2:link {
color: #000000;
}

You could then use:
<div class="style2">
all my black links in here
</div>
<div class="style1">
all my red links in here
</div>

or

do it individually:
<a href="mylink.html" class="style2">Link text here</a>

[stever]

There are a number of different ways of achieving the same goal.

But a good idea is to analyse what you are trying to do in the first place:

Are all links the same size, as in your example?
Is one colour the "main" link colour and the other in only one specific place on the page?
Or are the "different" links located all over the place on the page?

If only in a sidebar (for example) your styles could be reduced to the following:

a {
color: #f00;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}
#sidebar a {
color: #000;
}

where the container is given or already has a single ID.

Where the different links are all over the page you may need to give each of them a style:

a {
color: #f00;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 21px;
}
a.different {
color: #000;
}

which obviously can be more longwinded.

[eelhandroll]

Thanks mm1220 and stever!