Neticulis.com > Programming > Learning CSS

└>Lesson 6: Styling Links With CSS

Setting Up Link Presentation
When setting up the styles you want to apply to links, you will be using the "a" selector. But CSS also has a thing called a psuedo-class, which is appended to the selector with a colon. These are most popular when setting up css for links, it allows your link to have one style when its normal, one style when its been visited, one style for when the mouse is over it, and another style for when the mouse button is pressed down on it. These psuedo-classes are called :link, :visited, :hover, and :active. Here is the sample code, it should be enough for most people, just change the color to what you would like your links to use:

The HTML:
<a href="http://www.google.com">Example Link </a>

The CSS:
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}


You should try to keep these 4 rules in the same order, some of them can override the others if placed in the wrong order. But feel free to do whatever you want with the properties!

Now head to Lesson 7 to learn more about the awesome :hover command that css uses




Copyright 2005-2008 Neticulis.com