Styling Link using Css.

[famfam]

Hello,

I wish to create a link similar to the "Forgot your Password?" at

https://www.facebook.com/

(No underline, underline on hover).

I tried this Css (external stylesheet but it isn't working):

#forgetpass
{
font:tahoma;
font-size:10px;
background-color:#3B5998;
color:#768BB7;
position:fixed;
top:100px;
right:104px;

a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

a:link {color:#768BB7;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
}

and in my html


<a id="forgetpass" href="

https://www.facebook.com/login/identify?ctx=recover">Forgot

your password?</a>

 

[darryncooke]

you can do it this way

#forgetpass
{
font:tahoma;
font-size:10px;
background-color:#3B5998;
color:#768BB7;
position:fixed;
top:100px;
right:104px;

a:link {color:#768BB7; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none;}
a:hover {color:#FF00FF; text-decoration:underline;}
a:active {color:#0000FF; text-decoration:underline;}
}

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[famfam]

Hi,

The link appears with an underline.

See the attached, which my editor generates. Notice that the block ends at a:link.

I believe the closing } for a:link prevents the rest of the css from being applied.

 

[vacunita]

1. You can't have element styles inside other styles, only properties. So having not 1 but 2 sets of a a element styles and their states there will not work.

2. You never define that the link should not have an underline. So it always has it until its visited where you then define the text-decoration to none.

3. Why use 2 sets of a styles, just add the properties inside the same one as you need them.

Try this:

[COLOR=#993399]#forgetpass[/color]
[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]font:[/color][i][COLOR=#009900]tahoma[/color][/i];
[COLOR=#0000FF]font-size:[/color][i][COLOR=#009900]10px[/color][/i];
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#3B5998[/color];
[COLOR=#0000FF]color:[/color][COLOR=#FF0000]#768BB7[/color];
[COLOR=#0000FF]position:[/color][i][COLOR=#009900]fixed[/color][/i];
[COLOR=#0000FF]top:[/color][i][COLOR=#009900]100px[/color][/i];
[COLOR=#0000FF]right:[/color][i][COLOR=#009900]104px[/color][/i];
[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]link[COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]none[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#768BB7[/color];[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]visited [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]none[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#00FF00[/color];[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]hover [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]underline[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#FF00FF[/color];[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]active [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]underline[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#0000FF[/color];[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[famfam]

Hi,

That appears correct, but it appears all links created then has that property. I specifically wanted it for a single link.

 

[vacunita]

Then you need to be specific. a:link applies to every link on the page.

If you need it to apply to a single link, then you can specify the ID for it.

[COLOR=#993399]#forgetpass[/color]
[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]font:[/color][i][COLOR=#009900]tahoma[/color][/i];
[COLOR=#0000FF]font-size:[/color][i][COLOR=#009900]14px[/color][/i];
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#3B5998[/color];
[COLOR=#0000FF]color:[/color][COLOR=#FF0000]#768BB7[/color];
[COLOR=#0000FF]position:[/color][i][COLOR=#009900]fixed[/color][/i];
[COLOR=#0000FF]top:[/color][i][COLOR=#009900]100px[/color][/i];
[COLOR=#0000FF]right:[/color][i][COLOR=#009900]104px[/color][/i];
[COLOR=#FF0000]}[/color]
a[COLOR=#993399]#forgetpass[/color][COLOR=#990000]:[/color]link[COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]none[/color][/i]; [COLOR=#FF0000]}[/color]
a[COLOR=#993399]#forgetpass[/color][COLOR=#990000]:[/color]visited[COLOR=#FF0000]{[/color] [COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]none[/color][/i]; [COLOR=#FF0000]}[/color]
a[COLOR=#993399]#forgetpass[/color][COLOR=#990000]:[/color]hover[COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]underline[/color][/i]; [COLOR=#FF0000]}[/color]
a[COLOR=#993399]#forgetpass[/color][COLOR=#990000]:[/color]active[COLOR=#FF0000]{[/color] [COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]underline[/color][/i];[COLOR=#FF0000]}[/color]

a[COLOR=#990000]:[/color]link [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]underline[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#768BB7[/color];[COLOR=#FF0000]}[/color] 
a[COLOR=#990000]:[/color]visited [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]none[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#00FF00[/color];[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]hover [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]underline[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#FF00FF[/color];[COLOR=#FF0000]}[/color]
a[COLOR=#990000]:[/color]active [COLOR=#FF0000]{[/color][COLOR=#0000FF]text-decoration:[/color][i][COLOR=#009900]underline[/color][/i]; [COLOR=#0000FF]color:[/color][COLOR=#FF0000]#0000FF[/color];[COLOR=#FF0000]}[/color]

The first set of a's applies to the link with the ID of forgetpass. the second set would apply to all other links in the page.

You can of course move all the #forgetpass properties inside a#forgetpass:link style and it would work the same.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[famfam]

Hello,

That worked, thanks.

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech