2 links one page

[nate51]

I have a footer to a page that uses css to assign a link colour, mouse over colour, visted colour etc.

But now I have a link on the page and need to assign it new css values for the link colour, mouse over etc. The css is an external style sheet it's not embedded in the html.

How would I go about having the page bring up a different colour from the css or do I need a new css just for the links, and even then how do I assign the new css?

[Nile]

Can you please provide a link to your page and the code. We can't understand it otherwhise.

[jscheuer1]

You can assign each link or group of links a unique class and style them in the existing stylesheet by setting the rules for each of those classes.

[nate51]

You can assign each link or group of links a unique class and style them in the existing stylesheet by setting the rules for each of those classes.

Ok, I understand most of that except setting rules of those classes, I don't know what that means.

[Snookerman]

I'm assuming you css code for the links looks something like this:

a {
color:blue;
}
a:hover {
color:green;
}
a:visited {
color:red;
}
//etc...

What you need to do is give the link you want do be different an id value (or class value in case you have more than one, id values should only be given to one element per page). E.g.

<a href="http://www.example.com/" id="anything">I'm special</a>

Then just add this to the css code:

#anything {
color:pink;
}
#anything:hover {
color:orange;
}
#anything:visited {
color:yellow;
}

Of course you style it the way you want and give it what id value you want.

If you have more than one link that you want to be different, use class values:

<a href="http://www.example.com/" class="somethingelse">We're special</a>
<a href="http://www.example.com/" class="somethingelse">We're special</a>
<a href="http://www.example.com/" class="somethingelse">We're special</a>

The css code would be almost the same except that class values have a dot in front of them instead of the number sign that the id values had:

.somethingelse {
color:pink;
}
.somethingelse:hover {
color:orange;
}
.somethingelse:visited {
color:yellow;
}

[nate51]

Snookerman, that did it, thanks so much for the help and the example code. It's easier than I thought it would be.

[Snookerman]

@nate51 You're welcome and good luck with your page!

@jscheuer1 Thanks for the edit, I missed that when copying and pasting .