Individual Link Effects - Use CSS to make individual links react in their own individual ways!

Check CSS and CSS comments for how to make different links act differently.
Even though classes are being used here, you can make a link act individually if you just take care not to name any other link using that same class name.

If you can't see the source or download the page as Page Source or HTML Source, then scroll to the bottom of the page for some explanation!

link me 1

link me 2

link me 3

link me 4

link me 5

link me 6

link me 7

link me 8

Some Explanation


   a:link {color: #0000FF;}
   a:visited {color: #990099;}
   a:focus {color: #66CCFF;}
   a:hover {color: #66CCFF;}
   a:active {color: #FF0000;}
   a:link      -link 
   a:visited   -visited link
   a:focus    -the link currently selected with the keyboard
   a:hover    -a link with mouse rolled over it 
   a:active   -a link you are holding your mouse down on 
   NOTICE: the new examples below add a 
   dot and a class name after the a and before the :
   If you want more than one link to act the same way, use the same class.
   If you want a link to be unique in how it acts, don't give any other link that class name.

So this CSS directly in the style tag:
a.link1:link {color: #006600;}
a.link1:visited {color: #33FF00;}
a.link1:hover {font-weight: bold;}
a.link3:link {font-weight: bold; color: #CCCCCC;}
a.link3:visited {font-weight: normal; color: #555555;}
a.link3:hover {color: #FFFFFF;}
a.link3:active {color: #FF0000;}

Corresponds to these link tags with added classes:

<a href="" class="link1">link me 1</a>

<a href="" class="link3">link me 3</a>