NM Web Tutorials
XHTML
Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX ColoursCSS
Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding BackgroundsOther Useful Tips
Add to Search Engine TermsCSS
What The Code Does
a:link {color:#33CC00;}
a:visited {color:#FF9900;}
a:focus {color:#FF00FF;}
a:hover {color:#FF0000;}
a:active {color:#0000FF;}
Just so you know, I put each Style Rule on one line because in this particular case I think it’s a bit more organized since they’re all related. The colon after the a (the a is for the <a href>, which means it's referring to links) is because it’s referring to the different states of the link. Here is what they mean:
link: How your link will appear while it’s idle, and has never been visited.
visited: If you’ve been to that page before.
focus: when you’ve highlighted it with the tab key (or you click back after clicking).
hover: when your mouse is on it.
active: on the click.
It’s that simple, you just change the colours however you want. By the way, if you want to get rid of that underline that’s in links by default, you can use the override like this:
a {text-decoration:none;}
Notice that there is no colon after the a this time? That’s because I’m referring to all aspects of the <a href>, not just one of the states. That said, if did want an underline for one of the states, like hover, than add the the text-decoration: underline; to that Style Rule.
| NEXT>>
Home | Roll Overs | Text