CSS Part 4: Links

In this next part of our guide, we discuss how to stylize links. It’s not as easy as simply applying a single colour.

In the previous part of our guide, we discussed how to add some style to our images and backgrounds. Of course, it may make the site look good, but it might be a tad difficult to navigate around with out links. While you may already know how to add links through HTML, you may not know the intricacies of links when styling it. This guide shows you how to style those links.

What Goes Into a link/URL Anyway?

You might be tempted to think of a URL as a single glorified button that takes you to the next page. The reality is that a URL tells the user a lot just based on colours. Believe it or not, each link on the web has four states! Those states are “link”, “visited”, “hover”, and “active”.

A link state is simply the normal state of a link. Your mouse isn’t over it and you haven’t visited that page yet. That is what a “link” state is.

Meanwhile, a “visited” state means that your browser remembers that you visited that page. As a result, you can make that link look slightly different so you can subtly tell your user that you’ve already been to that page.

Moving to the next state, “hover” is what happens when you move your mouse over top of the link. This can add a little bit of an added show to help indicate to the user that they are, indeed, mousing over a link.

Finally, there is “active”. Active is what happens when you are either in the process of left clicking that url (very quick I might add). To better see this active URL, simply click and hold the left click button (right clicking won’t work).

Adding Style to Our URLs

Before we begin, let’s add a URL or two to our HTML page. Here’s what I did:

The first URL I have here is a page I’ve obviously visited. The second URL is a link to a page that doesn’t exist. This way, my browser will tell me it’s a link I haven’t been to before. The resulting page I get after that is this:

Not a whole lot going on here. What you see is the standard default setting to all URLs when no CSS is present in links. A new page simply has a blue font with an underline added. A visited URL is the same, but purple. How can we change things up? Very simple. First, let’s modify the link state as that is the easiest state to test.

To change that links state, we can add the lines a:link { color: [insert colour hex value or name here]; }. This is what I chose to add:

The end result is this:

As you can see, the URL that hasn’t been visited has turned into a dark green.

Of course, changing the font colour isn’t the only thing you can do with the look of a URL. You can also adjust the font weight and even whether or not there is text decoration.

Before I continue, it is vitally important that you have a design where links at least distinguish themselves from the rest of the normal text. If you have just a normal black font for links as well as normal text, for instance, then it is impossible for users to tell what is a clickable link and what isn’t. If you are going to use the same font size and colour, ideally, you’ll want to leave at least the underline. You could bold face it, but then it’s difficult to tell if its a link or a boldfaced font. The last thing you want to do is make it harder for your users to browse your site after all.

In addition to all of this, if you do choose a colour, make sure it doesn’t conflict with other elements (such as the background) in your site. It’s one thing to distinguish it from the rest of the text, but it is also another thing to make sure it distinguishes from, say, a background picture.

Now, having said all of that, let’s say you want to boldface a link and remove the underline. That can be done. Let’s modify the visited URL to do this so you can see how a visited URL can also be modified.

So, for this, I’m going to add the line a:visited { color: #0000cc; }. After that, I’m going to add the lines “text-decoration: none;” and “font-weight: bold;” to “link” like so:

The end result is this:

One thing to note is that you may run into issues stylizing visited. For example, you can remove the underline for a normal URL, but putting it back in the visited value may not work.

Now, let’s continue our stylizing with the “hover” value. One way you can affect how a hover works is to adjust the text decoration. A fairly common way to add a hover value for URLs without underline is to add the underline into the hover value (text-decoration: underline;). Personally, just for kicks, I’m going to play the contrarian here and add an overline instead. So, I’m simply going to add the following to my CSS: a:hover { text-decoration: overline; } like so:

The end result is this (note that you can’t see the cursor, but you can see the effect of my hovering my mouse over a URL has):

Finally, let’s add the last value to our CSS to complete the set: “active”. As we’ve pointed out at the beginning of this part of the guide, it’s a bit hard to test it because left clicking on the link means it will only flash your results. The best way to test it is to left click and hold to see what it looks like.

So, I’m going to add the following line to my CSS: a:active { color: #990000; } like so:

The end results (I clicked, then dragged the URL to an inactive part of the page to show just the results of the active state):

That’s pretty much it!

Congratulations! You can now stylize links in a nice basic manner!

< Images and Backgrounds | CSS Index | Lists >