CSS Hyperlinks
You can use CSS to change the appearance and behavior of hyperlinks.
To do this, you can use the following selectors/pseudo-classes:
- a
- a:link
- a:visited
- a:hover
- a:active
These selectors/pseudo-classes represent the 'anchor' element (specified using the HTML 'a' tag) and its various states.
Examples
Some nice effects can be achieved by using the text-decoration property in conjunction with the color property.
Here's an example of the code that you might insert into a style sheet to achieve the desired effect.
a {font-family:Georgia,serif; font-size:large}
a:link {color:blue;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900;
font-weight:bold;}
a:active {color: red;text-decoration: none}
Note that the a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the effect of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color (red) will apply when the user both activates and hovers over the 'anchor' element.
Hyperlinks with no underline.
a:link { text-decoration: none }
It can confuse your users if your hyperlinks aren't underlined. A more usable solution would be only to apply this behaviour to hyperlinks only when users hover over them.
Text rollovers
a:hover { text-decoration: none }
Use the a:hover selector.
Cursor effects
a:hover { cursor:help }
Use the cursor declaration.