CSS simple problem

[Parsa44]

I have always wanted to have some red rollover links and some green rollover links on my page i followed this guide to try and do this:

http://www.echoecho.com/csslinks.htm


i did exactly as it said but for some reason it doesnt work for me, here is my code:

The problem is that the links appear already underlined, and when i roll over they are still underlined.

body  {
    font-size: 24px;
    font-family:  Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #FFFF00;
    background: #000000;
    margin: 0;
    padding: 0;
    text-align: left;
}
.SmallGreen {
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #00FF00;
    font-size: 20px;
    text-align; left;
}
.SmallGreen a:link  {
    color: #00FF00;
    text-decoration: none;
    font-size: 24px;
}
.SmallGreen a:visited  {
    color: #00FF00;
    text-decoration: none;
    font-size: 20px;
}
.SmallGreen a:hover {
    color: #00FF00;
    text-decoration: underline;
    font-size: 20px;
}
.SmallGreen a:active {
    color: #00FF00;
    text-decoration: none;
    font-size: 20px;
}


.HeaderLink {
    color: #FF0000;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    text-align: center;
    font-size:25px;
}
.HeaderLink a:link  {
    color: #FF0000;
    text-decoration: none;
    font-size: 25px;
}
.HeaderLink a:visited  {
    color: #FF0000;
    text-decoration: none;
    font-size: 25px;
}
.HeaderLink a:hover {
    color: #FF0000;
    text-decoration: underline;
    font-size: 25px;
}
.HeaderLink a:active {
        color: #FF0000;
        text-decoration: underline;
        font-size: 25px;
}


.Title {
    color: #FF0000;
    font-family: Algerian, Stencil, Rockwell Extra Bold, Arial Black, Times New Roman;
    font-size: 30px;
    text-align: center;
}
.SubTitle {
    color: #FF0000;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    text-align: center;
    font-size:25px;
    text-decoration: underline;
}
.Text {
    color: #FFFF00;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    font-size: 24px;
    text-align: left;
}
.TextCentered {
    color: #FFFF00;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    font-size: 24px;
    text-align: left;
}
.container { 
    width: 46em; 
    background: #000000;
    margin: 0 auto; 
    border: 1px solid #000000;
    text-align: left; 
} 
.header { 
    background: #000000; 
} 
.mainContent {
    border: 1px solid #FF0000;
    margin: 0 1.5em 0 13em;
    background: #000000;
} 
.navigation {
    float: left; 
    width: 12em; 
    background: #000000; 
    padding: 5px 0; 
    border: 1px solid #FF0000;
}

[kbjradmin]

try this:

.SmallGreen a:link, .SmallGreen a:active, .SmallGreen a:visited{
font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
color: #00ff00;
size: 24px;
text-decoration: none;
}

.SmallGreen a:hover{
font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
color: #00ff00;
size: 24px;
text-decoration: underline;
}

[Parsa44]

why does hover get its own tag and the rest dont?


btw thanks for your support i really appriciate it.

[nightscream]

hover = while mouse is over the link.
the rest has nothing to do with that.

[xPlozion]

also, if :link, :active and :visited aren't used, they will get their looks from the standard a tag. i just use a and a:hover when doing links on my site.

[Parsa44]

unfortunatley it still doesnt work, i really cannot understand where the problem is here.

when i use:

body a:link  {
    color: red;
	text-decoration: none;
}
body a:visited  {
	color: red;
	text-decoration: none;
}
body a:hover {
	color: black;
	text-decoration: none;
	background-color: yellow;
}
body a:active {
        color: blue;
		text-decoration: none;
}

it works fine, but that doesnt help me because i need three diffrent link hovers....

[Scoochi2]

a:hover.hovergreen {
	color: yellow;
}

a:hover.hoverred {
	color: red;
}

a:hover#hoverblue{
	color: red;
}

Use the above snippet as a quick example of using multiple styles for the same type of element. In your HTML:

<a href='redpage.html' class='hoverred'>This link is red on hover.</a><br>
<a href='greenpage.html' class='hovergreen'>This link is green on hover.</a>
<a href='bluepage.html' id='hoverblue'>This link is blue on hover.</a><br>

The name of the class/id is irrelevant, so long as it matches up with your markup.

[Parsa44]

Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?

[goldy300]

You were putting your class first and then a:hover second.

.class a:hover{}

Make it

a:hover.class{}

[Scoochi2]

Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?

Actually, yes. In your initial post you mentioned that you only wanted different links to be different colours when you hover on them. If you're happy with everything else staying at the defaults, the only thing you need to do is to tell it what you want to do on the hover.

See my above post for how to do that, using classes or ids.

(note, the 'blue id' in my previous post will make the text red because I copy pasted from the red and forgot to change the colour, you'll see why when you look at it ;))