links

Links are defined using the standard <a> tag. Normal links look like this:
Go to another page

<a href = "newPage.html">Go to another page</a>

The href value indicates the address of the new page. The text between the <a> and </a> is the text that will appear as a link on the page.

defining standard links

Like most XHTML elements, links have a standard appearance. For example, most browsers indicate a link by making the linked text blue and underlined. Users have gotten used to links being designated in these ways, so if you choose to change the appearance of links, you need to still be careful that the user understands the object is a link that the user can use to navigate off the page.

defining link styles

Since a link is simply an XHTML tag, you can apply a style to it like any other XHTML element. For example, to make all links black, use this style:

a { 
  color: black;
}

You can apply any style to an anchor that you wish. However, most usability experts recommend that you leave all links underlined unless they incorporate some other obvious navigation hints (perhaps they are formatted as buttons, for example.)

using the hover and visited pseudo-selectors

Anchors are special because they can have more than one state. You may want to apply different styles to the anchor if it has already been visited, or if the mouse is currently over it. The following style rules illustrate how this can be done:

a { 
  color: black;
}

a:visited {
  color: purple;
}

a:hover {
  color: white;
  background-color: black;
}

Here is some code using these styles:

The anchor tag still has its own style definition, but the other states (visited and hover) can also have styles devoted to them. The visited state occurs if the user has already been to this page. (Delete your browser history and cache to make all sites "unvisited" for testing) The hover selector allows you to specify a custom style that should occur when the mouse is "hovering" over the link.

links and useability

Links are an important useability feature of web pages. You must take care not to confuse the user when you apply custom styles to your links. It still must be very apparent to your users what elements can be clicked on for navigation. Consider the following tips when you build custom anchor styles:

Make it still look like a link

Be very careful not to makes unrecognizable as such. It's generally best to keep links underlined if possible.

Don't change sizes

It's tempting to make a hovered link larger or smaller. Avoid the temptation. Changing the size of an element dynamically can effect the rest of the page, making things jump around. Changing the font can have the same effect. Keep your hover states simple, changing colors, backgrounds, or images.

use color carefully

Color should be used to communicate. You want to stay within the color design of your document, but you also may use color to designate links.

Consider hover for highlighting

If you don't want to use underlining and color to make links apparent, consider using the hover tag. Make the link text change in an obvious way when the user hovers over it. It's better if links are still obvious as such when the user is not over it. You don't want to force the user to fly over the page with the mouse looking for links.

Don't underline things that aren't links!

Users have been conditioned that underlined blue text on a web page is a link. If you want to make your users crazy, put underlined blue text on your page that is not a link. You'll get angry emails. Now that web designers have moved away from the default link colors, underlining text in any color has become a powerful cue that the text is a link.