Help With Css Please

[rockerz]

Hi,

Following is my working style sheet


BODY { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #333333; FONT-SIZE: 10px; }

TD { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
COLOR: #333333; }

A { COLOR: #000099; text-decoration: NONE}

A:HOVER {
text-decoration: none;
color: Red; }
A:visited { color: #666666; text-decoration: none}

A:VISITED:HOVER { color: Red; text-decoration: underline }

H1 {FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 17px; COLOR: #000066; }

Following (not working) is where I am trying to add a "class" thing so that I can have certain links in different colour and different hover colour etc


.color01 {
/* new colour link*/
A: color: Green;
A: visited color: #666666;
text-decoration: none
A:VISITED:HOVER {color: black; text-decoration: underline;
}

Also, when I want to apply the class thing in the html page that links to the style sheet, where in (or in relation to ) the link tag do I put the class="colour01"

With text it is easy to go <p class="another_colour"> example text</P>
but where in the link tag goeth the class thing please?

[Paul O'B]

Hi,

I think it better id I send you to the faq here:

http://www.sitepoint.com/forums/showthread.php?t=171943#

Which answers all your questions and shows you various ways to do it.

Its worth noting that you can never put selectors inside a style decaration as you have done here:

color01 {
/* new colour link*/
A: color: Green;
A: visited color: #666666;
text-decoration: none
A:VISITED:HOVER {color: black; text-decoration: underline;
}

You style the links by defining them like so:

.color01 a:link {color:green}
.color01 a:visited {colour:red}
.color01 a:hover {colour:white}
.color01 a:active {colour:yellow}

html:

<div class="color01">
<a href="#">This link will be green</a>
<a href="#">This link will be green</a>
<a href="#">This link will be green</a>
</div>

Or alternatively like this:

a.color01:link {color:green}
a.color01:visited {colour:red}
a.color01:hover {colour:white}
a.color01:active {colour:yellow}

html:

<div>
<a class="color01" href="#">This link will be green</a>
<a href="#">This will be default color</a>
<a href="#">This will be default color</a>
</div>

Read the FAQ for a thorough explanation

paul

[rockerz]

Thank you very much Paul. clear answer and will study FAQ

[rockerz]

What is the significance of the div tag here? Do I have to use it?
R

[Paul O'B]

If you mean the last example then it has no significance.

This is fine:

<a class="color01" href="#">This link will be green</a>
<a href="#">This will be default color</a>
<a href="#">This will be default color</a>

Paul

[rockerz]

Thanks Paul.
I had tried this but I had a quote after the class name.
<a class="color01" href="#">This link will be green</a>
Curious how you can have a seemingly "orphaned" quote mark.
R

[yodaddy]

Thanks Paul.
I had tried this but I had a quote after the class name.
<a class="color01" href="#">This link will be green</a>
Curious how you can have a seemingly "orphaned" quote mark.
R

Paul just made a simple mistake. The quote should be around the class parameter.

[Paul O'B]

<a class="color01" href="#">

That's correct there was a missing quote in my example - sorry

Paul