Why Link Styling Is Different

Links are styled differently than regular text because they are active elements on your pages. The browsers indicate this to the viewer by coloring links blue and underlining them by default. The mouse cursor also changes from an arrow to a "hand" when hovering over a link. This is all to differentiate links from regular text.

When CSS came out, webmasters started changing the appearance of links. Not all pages look so good with the default blue, underlined links. The basic concept of making links stand out from regular text still applies, but now you're far more free in making this distinction.

The Psuedo-Classes

Because links are active elements, they can change with the viewer's actions. Links have four states called "psuedo-classes":

1) A fresh, unvisited link waiting to be clicked. CSS calls this the "a" or "a:link" element. Note the colon ( : ) between the "a" and the name of the psuedo-class. This is important to keep up with.

2) A link that is being "hovered" over by the mouse cursor. CSS refers to this as the "a:hover" element. Netscape 4.x does not support styling this element. Netscape 6.x and IE support "a:hover" styling.

3) A link that is being clicked. This is referred to as "a:active".

4) A link that has been "visited", or clicked before. CSS calls this "a:visited"

These link events are picked up by the browser and you can style your links for each event or psuedo-class. Default links in IE and Netscape are blue and underlined when fresh, red when clicked, and purple when visited.

Styling Links

We should make a style rule for each pseudo-class unless we want a default value for that psuedo-class to be displayed -- which is seldom.

Lets see how I made the orange links on my pages.

<style type="text/css">

a:link, a:visited {color: #ff9900;
text-decoration: underline;}

a:hover, a:active {color: #ff0000;
text-decoration: none;}

</style>

A couple of things to take note of here. First notice that each psuedo-class acts as a separate element. In fact that's the easiest way to think of them. Also note that I styled two psuedo-classes at once in both style rules. This is just like styling two separate elements. The psuedo classes are listed as elements and separated with a comma.

Styling link psuedo-classes together like this is common. Particularly the "a:link" and "a:visited". This helps maintain the page's color scheme. There's no rule, however, keeping you from styling all of the psuedo-classes separately and giving them each different characteristics.

We also see a good use for the "text-decoration" property. This is what removes and adds the default underlining of the links on my page. You'll notice that the underlining disappears when you're hovering over or clicking a link. (Try this on the big links at the bottom of this page. Remember that Netscape 4.x does not support the "a:hover" psuedo-class).

The overall goal in styling links is to distinguish them from the page's regular text. Keep this in mind. Don't make your links too much like your text. The best ways to diffentiate links are to use color, underlining, text size, and boldness.

Another consideration is to make your link styling consistent so that the viewer can readily recognize your links as they go from page to page on your site.

The next lesson will show us how to make different classes of links. This is for cases where you want one set of links (like in a nav bar) to look different from another set (like in your regular text).