CSS Trick: Defining Link Styles
Most people, when they define their link styles in CSS use something like this:
a { }
a:hover { }
a:visited { }
That will work most of the time, but there are drawbacks. First drawback is that if you use named anchors in your files (and if you use them correctly) then a good browser will show some strange results by applying your “hover” state to it. It’s weird because you don’t expect it, even though that’s exactly what it should be doing.
So, what you should be doing is to define the links in a better manner. First, you don’t need the “a” part on the links if you do it right. Second, you need to define them in a specific order, notably: link, visited, hover, active. There’s a simple mnemonic for this: ”LoVe-HAte”. Your link styles should look something like this:
:link {
color: #33c;
font-weight: bold;
text-decoration: none;
}:visited {
color: #639;
font-weight: bold;
text-decoration: none;
}:link:hover, :visited:hover {
background: #ddf;
}:link:active, :visited:active {
background: #ddf;
}
The actual styles you use inside them are up to you, of course. You can also specify different styles for the “hover” and “active” states of regular or visited links. Enjoy!
Posted Sunday April 25, 2004 in CSS Tricks by Chris Curtis
This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.
Hi,
i want to change the color of the active link.
for example there are three links
“link1, link2, link3”
then when i click link1, and goes to link1 page, now the color of link1 to be changed, so that i can know i am in link1
next when i go to link2, the link2 color only has to change
By suresh on January 3, 2005 at 12:59am link