CSS pseudo-classes (ones like :link, :visited, and :hover) have been in use for quite a while in web designs. After all, it helps the user to know which links they’ve already visited, what parts of text are actually links, and so forth–it’s one of the ways we webdesigners make our sites interactive.

However, just because we can write CSS code for these classes doesn’t mean that there aren’t best practices for how to implement them. The following short write-up takes you through the ways we can make links work better in our designs.

1. Using Different Colors for :Link, :Visited, and :Hover
   This is the first and simplest edit you can make–making the unclicked, clicked, and hovered links look different from the surrounding text and from each other.This was one of the mistakes I made early on in web design; in one of my earliest layouts, I made the body text and link color the exact same without realizing it. This is what the CSS code looked like:body {color: #000000;
   background-color: #FFFFFF;}

   a:link {color: #000000; text-decoration: none;}
   a:visited {color: #BBBBBB; text-decoration: none;}
   a:hover {color: #BCBCBC; text-decoration: none;}

   And, since I had removed the underlines from the links by using the “text-decoration: none;” declaration in my CSS, nobody could tell there were links within the text unless they hovered over them and saw the text change from black to gray. Thus, people were confused, and rightly so!

   If, instead, I had used a vastly different color (or a brighter color that tied in with my overall design’s theme), links would have been much easier to see. The following code is excerpted from one of my more recent designs:

   body {color: #000000;
   background-color: #FFFFFF;}

   a:link {color: #0090ff; text-decoration: none;}
   a:visited {color: #bbbbbb; text-decoration: none;}
   a:hover {color: #6aa6d5;}

   In this example, the text is black and the background is white; the unclicked links are bright, vibrant blue to match with the more colorful parts of my design. Clicked links turn gray, and when any link is hovered over, it turns a little bit lighter blue.

2. To Use Underlines or Not to Use Underlines?
   It is Internet default to underline links, but for the most part, web designers of the past few years have eschewed underlining their links when designing their sites. It does look a bit clunky, almost like you couldn’t be bothered to mess with the default settings. So when is underlining a link ever appropriate?In fact, there are a few ways you can still incorporate underlining in your links–for sure, it sets off your links as different from the rest of your text.

   a:link {color: #0090ff; text-decoration: none;}
   a:visited {color: #bbbbbb; text-decoration: none;}
   a:hover {color: #6aa6d5;}

   In this code from the previous example, I showed some code where I took underlines off the a:link and a:visited class, and left underlines on for the a:hover class. This will introduce an underline only when the link is hovered over, to give it extra emphasis.

   You could also do the opposite: put underlines on the a:link and/or a:visited class, and take them off the a:hover class, so that your links stand out on the page, and change only slightly in format when they’re hovered over.

   a:link {color: #0090ff;}
   a:visited {color: #bbbbbb;}
   a:hover {color: #6aa6d5; text-decoration: none;}

   One other thing you can do is to use the “border-bottom” declaration within your link classes. This enables you to have one color for your link text and another color for the underline underneath it; you can also vary the width of the underline as well. This can lend a styled but not-too-elaborate look to your page. The following code is an example:

   a:link {color: #63af88; text-decoration: none;}
   a:visited {color: #2bab69; text-decoration: none;}
   a:hover {color: #63af88; text-decoration: none; border-bottom: 1px solid #b19d47;}

   Here, the link text is pale teal-green, and the border-bottom is one pixel thick and deep gold. This creates an unexpected but pretty contrast that still lets the user know he or she is hovering over a link.

3. Bolding or Unbolding Links When Hovered Over
   For a while in web design (probably around 2005-2006), making links bold when hovered over was the main trend; a counter-trend was making links bold all the time EXCEPT when hovered over.Bolding hovered-over links was accomplished in the following way:a:link {color: #FF0000;}
   a:visited {color: #000000;}
   a:hover {color: #000000; font-weight: bold;}

   And to create the “unbolded” effect, you would do something like this:

   a:link {color: #FF0000; font-weight: bold;}
   a:visited {color: #000000; font-weight: bold;}
   a:hover {color: #000000;}

   Personally, this always made the rest of the page text jump around on the page a little too much for my liking–when link text suddenly became bold, normal text beside it or otherwise around it would be nudged out of the way, sometimes even bumping words to the next line. Not a really professional look, though I will give it credit for being an inventive way to make links different without having to change their color all that much. I feel at this point in web design that bold-on-hover is best for navigation links, which won’t knock normal text out of the way.

4. Quick-Cursor-Change when Links are Hovered Over
   I had to do a little research on this one, because while I saw it in use quite a bit back in the day, I never knew enough about it to implement it in my own designs. W3Schools.com has a full CSS reference and a sandbox to test cursors in, for your further knowledge.  

   The basic premise of using this declaration is to change the cursor to something different when the user hovers over a link on your page. Generally, the default is to change the cursor from the arrow to the little hand-with-index-finger-extended icon when you move over a link, but webdesigners when I first started out liked to change the hover cursor to other options, like these:

   a:link {cursor: ne-resize;} (two-ended arrow going up from left to right)
   a:link {cursor: help;} (regular arrow with a question-mark out beside it)
   a:link {cursor: crosshair;} {black crosshairs}You can even change the cursor to a specific file you link to, using the “cursor:url” property, like so:

   a:link {cursor: url(‘sunshine.gif’);} (if you had an image called “sunshine.gif”, it would make it into the user’s cursor image when they hovered over a link)

   This can still be useful in today’s design if you’ve got certain types of links that give a user needed information.  The following example shows such a CSS class declaration, and usage of the class within a link in your document:

   .helpful {cursor: help; text-decoration: underline;}

   <a href=”helpfulresources.html” class=”helpful”>See a list of helpful resources here</a>

   Other than that, though, having different cursors in this day and age may only confuse users when you visit your page. You want your user interface to be as simple and uncluttered as possible; even though that ne-resize cursor may look cute with your page, it might be annoying to your users.

Summary

Links can be styled a variety of ways, ranging from the uber-sleek to the super-cute, and everything in-between. Experiment and play with how you’d like your links to look, and find the style that best suits your site’s design and your users’ needs; remember, if you end up not liking it, the Backspace key is your best buddy!