September 19, 2005

CSS Hyperlink Styling

September 19, 2005, 1:49 PM | 3 Comments

In this CSS tip, we’ll be looking at various ways to style hyperlinks using CSS. There are many different methods and techniques that you can use to create uniquely styled links, and we’ll explore some of them here.

By default, hyperlinks in browsers are underlined. Normal links are blue, visited links are purple and active links (depending on the browser) are red. Designers do not want to live life by default though, so CSS provides some powerful ways to style your hyperlinks, allowing you to create a look and feel that best suits your design.

There are four states that a hyperlink can be in. Normal, Hover (when the mouse pointer is over the link), Active (when the link is clicked), and Visited. CSS allows you to control each state in any way you see fit.

To give you an idea of how you would use CSS to control your hyperlinks, we’ll just reproduce the browser defaults.

a:link {
    text-decoration: underline;
    color: #0000FF;
}

a:visited {
    text-decoration: underline;
    color: #660099;
}

a:active {
    text-decoration: underline;
    color: #FF0000;
}

The only link state that we didn’t touch there was the hover state. The reason for this is that browsers do not have a default hover state for hyperlinks.

To demonstrate the hover-state of a link, we’ll create some CSS rules that will make the text of the hyperlink bold.

a:hover {
    text-decoration: underline;
    font-weight: bold;
}

Click here to view the example.

You’ll notice that each link state defines an underline for the links. To make the CSS code a little more concise, we can define all global (styles that apply to all links, regardless of their state) link styles all at once. Any additional styles that are state-specific can be added after that. Our revised code would look like this:

a {
    text-decoration: underline;
}

a:link {
    color: #0000FF;
}

a:visited {
    color: #660099;
}

a:active {
    color #FF0000;
}

a:hover {
    font-weight: bold;
}

Now, this doesn’t make much of a difference for our example, but you can imagine how much less work it would be when you get into more complicated link styling.

Borders and Backgrounds

The possibilities for styling your links are almost endless. Some of the more common ways of making your links stand out are by using borders and backgrounds (either image backgrounds, or solid colours). For example, let’s say you had a bunch of links on your site, and when the user rolls over those links, you’d like them to appear highlighted. No problem.

a {
    color: #000099;
    text-decoration: none;
}

a:hover {
    color: #0000FF;
    background: #FFFF00;
}

I’ve done two important things here. First, I’ve set the default colour for all hyperlinks to a dark blue. Secondly, I’ve removed the underline from the links. In the hover state, I’ve changed the colour to a lighter blue, and added a yellow background color to make it look like the link has been highlighted.

Click here to view the example.

Another common way of styling hyperlinks is by using borders. Most of the time, it’s just a bottom border, which simulates an underline. On this site, I use a dotted bottom border for most of my links, and a solid bottom border (which looks like an underline) for the link hover state. Here’s how:

a {
    color: #0000FF;
    text-decoration: none;
    border-bottom: 1px dotted;
}

a:hover {
    border-bottom: 1px solid;
}

Click here to see the example.

Background Images

I’ve seen this on many sites, and even considered using it for this site. Some designers add a little extra flare to their links by adding in a small image into their links, the most common of which would be a small arrow. (Check out SimpleBits for an example).

It’s another easy technique that can be very effective. Here’s how you’d accomplish it.

a {
    text-decoration: none;
    color: #FF0000;
    border-bottom: 1px dotted;
    padding-right: 6px;
    background-image: url(images/csshl_arrow.gif);
    background-repeat: no-repeat;
    background-position: right;
}

All you have to do is give the link some padding on the right hand side, add a background image and set the repeats to none, and position that background image on the right-hand side.

Click here for the example.

One thing to make note of when using background images in your links. If the user has images turned off in their browser, but has CSS enabled, they wont see the image in the link, but the padding will remain, creating a small (distracting) empty space. While it’s not very common that CSS is enabled and images are turned off, it does happen, so you’ll want to think about how and where you use this method. 

As you can see, there are so many possibilities for styling hyperlinks. I’ve only touched on a few, but hopefully I’ve sparked your imagination by presenting the basics. So go ahead, be creative, and create your own unique style.

Posted in: CSS, CSS Tips, Web Development