How do you get it so that only certain links and text have this:

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: #FF00FF;
}


All my links turn that color and have the hover effect, how can I specify which text I want this to happen to?

Assign a class to the links you want to style:

<a href="#" class="foo">foo</a>And in the style sheet:


a:link.foo, a:visited.foo, a:active.foo { text-decoration: none; }
a:hover.foo { text-decoration: underline; color: #FF00FF; }
Also, as the default, visited, and active links share the same style, they've been combined into one selector. The ".foo" part means that the styles will only be applied to anchor tags with the class "foo".

hey thanks, I had another problem though, When I mouse over my links the text has a very tiny space where you can acutally click on it, How do I make the text clicking area bigger?

Can you post your HTML and CSS codes? We need to know what you have before we can troubleshoot it. ^^

I am trying to visualise what you mean. Have you got your <a> tags</a> around the whole word(s) that you want to be clickable?

You may try working with the display of the link, ie:
a.link{
display: inline;
}
This should fix the shrinking hit area .

Also for your first question.
if the links in area A are to be red:
area_A a.link{
color: red;
}
area_A a.hover{
color: green;
}

you can find all the css info you need here: 3schools (http://www.w3schools.com/css)

hey thanks, I had another problem though, When I mouse over my links the text has a very tiny space where you can acutally click on it, How do I make the text clicking area bigger?

In the class that you've assigned to your link, assign a width and height to it. width: 200px; height: 20px;

So for:

.foo a {
width: 200px;
height: 20px;
text-decoration: none;
color: #ff0000;
}
.foo a:hover {
text-decoration: underline;
color: #000000;
}
** you don't have to assign width and height to your hover state as they are already defined in the a class. Unless you want the width and height to be different on the hover state. **