Coloring Hyperlinks with CSS

Why color your hyperlinks? Adding color is one of the easiest ways to draw readers through your pages. Like adding pictures, adding color is a simple way to enhance the usability of your website. Three things you can accomplish with color:

  1. Improves reader scanning
  2. Indicates links
  3. Break up long texts

Design is not my strong suit. I can do most of what I need effectively. Otherwise, when it’s beyond my abilities, I refer to my brilliant graphic design friend, Nida. She’s the person I refer people to when they’re looking for custom graphic design work. Be sure to take a look at her portfolio. Anyway, Nida pointed up a great tool from Adobe.

Color Ideas

Kuler, from Adobe, is a great color scheme tool. On the site, you’ll find colors grouped together. You can use one of their many pre-defined color schemes, or you can make your own. Kuler has a great resource that lets you create custom color schemes and see what they will look like before you start working on your CSS.

You can pick your colors using the W3 Schools Color Picker. W3Schools also links other pages related to color, including a color mixer page. But this isn’t nearly as versatile as the Kuler tool.

You don’t need a lot of colors unless that’s really what you want to do. But remember to address your links (pardon the pun), when you’re planning your colors. You could leave your hyperlinks to whatever is the default color, but a better idea is to coordinate them with the scheme of your website.

One Thing about Formatting

If you’re not using CSS, get started. Small websites (say, one page–or three) can have the CSS code on the HTML page. The best practice for using CSS is to create a separate CSS file and link to it in your HTML head section. Place the following line of code (I place mine after the meta information):

<link rel=”stylesheet” type=”text/css” href=”blank-css-template.css” />

Replace ‘blank-css-template‘ with the name of your CSS file; one line for each CSS file you use.

Pseudo Codes for Hyperlinks

You use pseudo classes to manipulate the hyperlink colors in each of the states.

  • a:link – inactive hyperlinks
  • a:visited – previously clicked hyperlinks
  • a:hover – state when mouse is over the hyperlink text

It’s necessary that you include the link states in the order listed above for it to work properly. Also, you can add another state, called the active state, written a:active. It can be written before or after the a:hover state.

Format Your Hyperlinks

In your CSS document, the above pseudo codes are written without any introductory symbol. So, no pound sign (#) or period (.). A syntactically correct sample of the code you would include is:

a:link {font-family:Verdana, Arial, sans serif; color:#000033; text-decoration:none;}
a:visited {color: #003300; text-decoration:none;}
a:hover {color: #527A00; text-decoration:underline;}

Plug the code into your editor to see how it works. I prefer bold links, so one piece of code I’ll add is “font-weight:bold;” to each line. What are some of your ideas on color in your web pages? How do you manage adding color to your website?

Resources

  1. Kuler, for color scheme ideas, from Adobe
  2. W3 Schools Color Picker
  3. How to Create Rollover Text
  4. Graphics Ninja, for custom graphic designs

Leave a Reply

Your email address will not be published. Required fields are marked *