A Link of a Different Color

Posted under: 

I've been spending a lot of time reviewing websites lately. I keep seeing the same few mistakes over and over. Some of them may be intentional design choices, but for the most part they seem to be mistakes of omission. What I'm seeing is incomplete CSS for links. Incomplete link CSS does one of two things.

  1. It can allow the site's presentation to fall back on the browsers default CSS, a poor design decision in my viewpoint. 
  2. It can also be written is such a way as to be applied to all aspects of links. This would make a hovered link unchanged from a regular link.

The styling of links serves a purpose. It identifies links for the user. When a hovered link changes from a non-hovered link, it helps in that identification.

Let's start with a few basic CSS rules. Modern accessibility standards suggest that you should use more than just color to identify anything of significance. So the CSS for links should include two variations from traditional text. I'd suggest a distinct color and the traditional underline, but most any two should work.

a {color:#333300; font-weight:bold; }
a:link {
text-decoration:underline;}

Making visited links a slightly different color is also helpful for tracking where you've been in a site.

a:visited { color:#333333;}

I'd also suggest using the hover pseudo class to make the hover state different.

a:hover{ text-decoration:none;}

Are we done? Not quite. This is where I keep seeing sites fall short. You also need to define the active and focus states. Without definition, these will both default to either browser default or your own link CSS.

a:hover, a:active, a:focus { text-decoration:none;}

These three states can be together as shown above, or with completely different CSS, the choice is yours.

Add comment