I am new to CSS, and am trying to make a style sheet for a site I am working on. I want the text with links to change color when I mouse over them. However, I need different font sizes and colors throughout the site for links.

This is located at http://www.idealpt.com/temp

Here is what I have:



.style1 {
}
A:link {
COLOR: #FFFFFF; font-size: 12pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold; text-decoration: none
}
A:visited {
COLOR: #FFFFFF; font-size: 12pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold; text-decoration: none
}
A:hover {
COLOR: #000099; font-size: 12pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold
}
A:active {
COLOR: #4e4e4e;
}

.style2 {
}
A:link {
COLOR: #FFFFFF; font-size: 8pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold; text-decoration: none
}
A:visited {
COLOR: #FFFFFF; font-size: 8pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold; text-decoration: none
}
A:hover {
COLOR: #000099; font-size: 8pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold
}
A:active {
COLOR: #4e4e4e;
}


Thanks in advance for your help :)

Add the parent class to the beginning like so:

.style1 a:link a:visited{
font: #FFFFFF; 12pt; Arial; bold;
text-decoration: none
}
.style1 a:hover{
css
}
.style1 a:active{
css
}

etc... etc...

.style2 a:link{
css
}

Thank you for the help, I'll try that and see if I can figure this out :)

Merry Christmas to you guys, thanks again!

also

A:hover {
COLOR: #000099; font-size: 8pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold
}

ou forgot the ; at the end ;)

A:hover {
COLOR: #000099; font-size: 8pt; FONT-FAMILY: Arial;
FONT-WEIGHT: bold;
}