The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors:
a:link: Specifies how the link looks if the page it links to has not yet been visited.
a:visited: Specifies how the link looks if the page it links to has already been visited.
a:hover: Specifies how the link looks like when the user mouses over the link.
a:active: Specifies how the link looks like when the user clicks on it.
Let's take a look at the following declaration:
|
a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}
|
What this means is the following:
1) When the page is first loaded, the font color is red.
2) Once the link is visited, the font color becomes blue.
3) When you mouse over the link, font size becomes 20, font color becomes green, and an underline appears.
4) When you click on the link, font color becomes pink, and the underline remains.
Mouse over the "Sample Link" link below to see these effects.
Sample Link
Next: CSS List
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
More Tutorials: SQL PHP HTML
Copyright 2007-2009 1keydata.com All Rights Reserved. Privacy Policy
|