Introduction

Link Effects

Box Shadows

Curves

IMC Home Page

Creating Pseudo Class Rules

Here is a typical HTML snippet, inside a paragraph, featuring a simple sentence and text link:

<p>Here is a typical sentence with a link to <a href="http://www.google.com>Google</a> in it.</p>

In actual practice, the sentence looks like this:

Here is a typical sentence with a link to Google in it.

Let's say we want this link to appear underlined and red in the :link state, underlined and green in the :visited state, and underlined in yellow in the :hover state. The CSS rules for these effects are:

a:link {color:#F00; text-decoration: underline;}
a:visited {color:#0F0; text-decoration: underline;}
a:hover {color:#FF0; text-decoration: underline;}

Using these rules the link would look and act like this:

Here is a typical sentence with a link to Google in it.

You can use standard CSS syntax to customize the various states by specifying properties for type, borders, positioning, and much more. Here are some examples:

Notice that in the examples on the left some of the pseudo classes have underlining and some do not. Underlining is specified using the property/attribute pair text-decoration: none; or text-decoraton: underline;. The font families are specified, as are various colors for the text. A background color for the :hover pseudo class is established.

a:link { color: #033;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold; }

a:visited { color: #009;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold; }

a:active { color: #F00;
text-decoration: underline;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
background-color: #CCC; }

a:hover { color: #990;
text-decoration: underline;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
background-color: #9F0; }

Experimenting with pseudo classes is encouraged. It is an excellent way to become familiar with how they work.

< Return to Page 1 >