The previous tip showed how to make links on a web page more colorful. Internet Explorer 4.0 and above, lets you specify styles to unclicked, visited and active links through A:LINK, A:VISITED and A:ACTIVE selectors, respectively. These are called Pseudo-classes. (The support for Psuedo-classes is partial in Netscape).

Further, I.E. supports another Pseudo-class, A:HOVER that determines the style for mouse rollover effect on links.

The Pseudo-classes should be placed inside the HEAD section, between <STYLE> - </STYLE> tags.

<STYLE TYPE="TEXT/CSS">

A:LINK     {font-family: Verdana, Sans-serif;
            color:#00CC00;
            text-decoration:none;
            font-size:12pt}

A:VISITED  {font-family: Verdana, Sans-serif;
            color:#009900;
            text-decoration:line-through;
            font-size:12pt}

A:ACTIVE   {font-family: Verdana, Sans-serif;
            color:#FF0000;
            text-decoration:none;
            font-size:12pt}

A:HOVER    {font-family: Verdana, Sans-serif;
            color:#00CCFF;
            text-decoration:underline;
            font-size:12pt}

</STYLE>

Using the above style, unvisited links would be light green in color without underlines, visited links would be struck through and in a darker shade of green and active links would be red in color without underlines. On mouse over, links would be underlined and changed to a bright shade of blue.

Now whenever you to place a link on the page, their appearance will be determined by the pseudo-classes. To see how this works, move your mouse cursor over the link below and click on it.

Nowhere to go

The style information will determine the behavior of all links in the document. You can also name the pseudo-classes and refer these with the CLASS attribute if you want more than one link style in the same document.

A:LINK.implink      {color:#FF0000}
A:VISITED.implink   {color:#990000}
A:ACTIVE.implink    {color:#0000FF}
A:HOVER.implink     {color:#000000}


<A HREF="someplace.html" CLASS="implink">Someplace</A>