overriding css for links

Forum Moderators: not2easy

Message Too Old, No Replies

overriding css for links

how to override css for one link only

Lizzie K Pix

1:19 am on Feb 24, 2006 (gmt 0)

How do I apply a style locally to override the CSS in the <head>?

In the <head> I have

a:link {text-decoration: none;color: #CCCCCC}
a:visited {text-decoration: none;color: #CCCCCC}
a:hover {text-decoration: none;color: #990000}
a:active {text-decoration: none; color: #990000}

-->
</style>

However, I have one link on the page that I want color: #333333 as a:link and a:visited, with a:hover and a:active still #990000. What code should I put where to make this happen? Thanks!

webtress

3:58 am on Feb 24, 2006 (gmt 0)

You will have to create a class for the link and assign the class. example
<!--

a:link {text-decoration: none;color: #CCCCCC}
a:visited {text-decoration: none;color: #CCCCCC}
a:hover {text-decoration: none;color: #990000}
a:active {text-decoration: none; color: #990000}
a:link.new, a:visited.new {color: #D27F14;
text-decoration: none}
a:link.new, a:visited.new {color: #FFFFCC;
text-decoration: none}

-->
</style>

Then apply the class to the link.
<a class="new" href="your url">Your text</a>

le_gber

10:19 am on Feb 24, 2006 (gmt 0)

Lizzie K Pix

it is best to put put the css in a separate stylesheet. You could also make the following changes to make it 'lighter':

a{text-decoration: none;color: #ccc; }
a:hover, a:active, a.newlink:hover, a.newlink:active{color: #900; }
a.newlink{ color: #333; }

and in the code the one link would be:

the first line defines the style for all the links and all the 'states' of the links

in the second line you set the color change for the 'hover' and 'active' state of the links but do not need to repeat the text-decoration: none; as it is already defined in the 1st line. You use coma to separate the different style that you use with the same visual effect (i.e. all the hover and active 'states'). We also define here the states for the new link are they are similar to the other links' 'states'

in the third line you define all the states for all the link with a newlink class.

hope it make sense

ps on a sidenote it is also good for usability purposes to keep all your link underlined but also blue - except if this would make them unreadable on your backgroundor clashes with your design