CSS: Pseudo - Pseudo Classes
(Page 3 of 4 )
As we said before, pseudo-classes allow you to soup up those selectors. Here, in our first example, we will work with hyperlinks:
<html>
<head>
<style type="text/css">
a:link {color: red}
a:visited {color: purple}
a:hover {color: #0000FF}
a:active {color: orange}
</style>
</head>
<body>
<p><b><a href="http://www.devshed.com" target="_blank">Visit Developer Shed today!</a></b></p>
</body>
</html>
You can change your hyperlink in other ways like so:
<html>
<head>
<style type="text/css">
a.first:link {color: purple}
a.first:visited {font-size: 200%}
a.first:hover {background: yellow; font-size: 90%; font-family: Impact}
a.second:link {color: #ff0000}
a.second:visited {color: orange}
a.second:hover {color: red; text-decoration: underline overline; font-size: 150%}
</style>
</head>
<body>
<p><b><a class="first" href="http://www.aspfree.com" target="_blank">Click here to visit ASP FREE!</a></b></p>
<p><b><a class="second" href="http://www.seochat.com" target="_blank">Click here to visit SEO CHAT!</a></b></p>
</body>
</html>
There are other pseudo classes, such as the :first child and the :lang, but we will skip those for now (look for an explanation of them in my upcoming XHTML tutorial).
Next: A Preview of Mouse-over Effects >>
More Style Sheets Articles
More By James Payne
