Web design development. Link Effects using CSS

We can control the appearance of the three stages ( psuedo-classes) of a link's life cycle with a style rule like this placed within the <HEAD> of your document:

  <style>

  <!--

  A:link    { color: fuchsia }

  A:active  { color: gold }

  A:visited { color: blue }

  -->

  </style>

This causes visited links to be colored blue, unvisited links to be fuchsia, and links in the process of being accessed to be gold.

More than just color

Style sheets, rules and properties were designed to cover much more than color, of course, and you can bring all these features to together when defining link appearance using style sheets. For example, suppose you want your links to stand out a bit, rendering them in bold instead of conventional text. A property like this:

 A { font-weight : bold }

Links, regardless of their visitation status, would appear as established by this code. However, you could still control individual colors by combining the two rules together:

  A         { font-weight : bold }

  A:link    { color: blue }

  A:active  { color: red }

  A:visited { color: green }

Links like this would then follow both your boldness and color choices. Notice how we only needed to specify the font-weight property once for the <A> tag; the property was then inherited by each of the psuedo-classes defining the individual colors.

You can change the appearance of each psuedo-class. Suppose you want to embolden unvisited links, and remove the bold attribute when the link is visited. Try this set of properties:

  A:link    { font-weight: bold }

  A:active  { font-weight: bold }

  A:visited { font-weight: normal }

In this case, each link keeps the default color but is rendered in bold until it is visited. Note that this kind of textual appearance change, where each psuedo-class is different, is supported by Internet Explorer 4.0 however; Netscape ignores this.

Mixing and matching rules

You can also use other kinds of text decorations, like underlining:

A:link {text-decoration: underline; 

        font-weight: normal}



A:active  {text-decoration: underline;

           font-weight: bold}



A:visited {text-decoration: none;

           font-weight: normal}

Here you get all three features combined: underlined new links, bold active links, and plain visited links.

Once you get the idea, the possibilities are limitless. Another simple, effective way to denote links is to change the link's background color:

  A         { color: silver }

  A:link    { background-color: fuchsia }

  A:active  { background-color: black }

  A:visited { background-color: purple }

These links are sure to catch attention, and may even be abusive to your page if not used properly. Notice that we changed the default text color for all links to silver; you may have to adjust this color to match your page's default text color. You will also want to make sure your text color blends well with your selected background colors.

<< BACK