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.