The Definitive Guide To Styling Web Links

Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it,“without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

Styling Links

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should alsoindicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

• a:link { }
  Unvisited link.
• a:visited { }
  Visited links.
• a:hover { }
  The user mouses over a link.
• a:focus { }
  The user clicks on a link.
• a:active { }
  The user has clicked a link.

ENSURE CONTRAST

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

• text-decoration: underline;
  Underline.
• font-weight: bold;
  Bold.
• font-size: 1.4em;
  Enlarge.
• color: #ed490a;
  Color.
• background-color: #c0c0c0;
  Background.
• border-bottom: 2px solid #a959c3;
  Border.

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

DON’T FORGET ABOUT VISITED LINKS

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.