Ok, before you begin, you should have some basic understanding of CSS.

Now, have you ever seen a website where the hyperlinks grow when you mouse over them, or underline themselves? The code behind these hyperlinks is relatively easy, yet if used correctly, can make you site look more professional.

First, you need to know about pseudo-classes. The syntax for these in CSS is:
selector.class:pseudo-class {attribute}
In otherwords, CSS defines a number of classes relative to the user or the surrounding code which it can use to apply to a class of a certian selector.

The most unique are the anchor (hyperlink) pseudo classes. These have special effects when they are clicked or moused over. The default color and the "clicked" color of hyperlinks is determined by the surrounding font color, but now you are not limited by this. Take the following code:


This code defines the different colors of all hyperlinks with the class attribute of "one" to have certian colors, while not affecting those which don't have both the pseudo-class and the normal class. For example <a href="#">unaffected</a> would be unaffected but <a href="#" class="one">affected</a> would be affected by the css class.

Now for the fun part...

The hover pseudo-class can be used to create special effects beyond coloration. Take (for example) the following Style Sheet:

All of these link classes each have their own action when they are moused over. You can also put most other identifiers next to the a:hover line. Thats pretty much it for anchor pseudoclasses. Hopefully, more tutorials to come!

Thats all folks!

This post has been edited by polymath: 11 Apr, 2008 - 10:46 AM