Tutorial: Using Pseudoclasses to Style Your Links

One of the very first questions that gets asked by most people who are learning web design is: "How do I get my links to look different?" And especially: "How can I get two different link styles on the same page?"

The reason for the second question is quite obvious, when you think about it. Probably most web pages have links in at least two areas: the main text area, and some sort of navigation bar. And most often, the navigation bar is given very different colouring from the main text area. And that means that using the same colours, for example, would not work well.

Suppose, for instance, that you decided to leave the link colours in the main text area at their default. Most browsers will show unvisited links in a fairly dark blue, while visited links are a sort of purplish. That's fine on light backgrounds. But what happens if your navigation bar is blue or purple? The links will be a nightmare to try to read. And what happens if your navigation bar is green? Blue text on green background. . . ick!

Here, then, we will deal with very basic styling issues. You can learn fancy stuff later.

styling the "a" tag

To begin with, let's pretend that you aren't happy with the default browser colours for links, even though your main text area has a white background. We can remedy this before getting into dealing with pseudo-classes.

Note that the "a" tag has four states: link, visited, hover, and active. Often, designers will only create two looks - only "hover" will differ from the other states. Other designers like to make it clear to the user which pages he or she has already visited. For the sake of our tutorial, we will give examples of both.

Two states

Designing for only two looks is very easy: rather than go through the entire list of four states, you need only style the "a" tag itself and the hover state:

This will do for our example. With the above styling, your links will be red until hovered over. When the mouse passes over them, the text will be yellow over a red background. (Hey, I'm showing you technique; I'm not saying it will look good!)

Link (mouse off)

Link (hovered over)

That was easy enough; you can, of course, add more rules to your style, to suit your whims.

Four states

Okay, so we want to try the same thing with four states:

Your links will now look like this:

Unvisited link

Visited link

Hovered link

Selected (active) link

Note that it is very important to keep these four states in the proper order, or they will not behave.

pseudo-classes

Okay, now we have learned how to style links. But how do we get more than one style on a page?

Aha. Here is where pseudo-classes come in. In another tutorial , we learned about IDs and classes. With pseudo-classes, we can learn about how to put that knowledge to our benefit with link styles.

As it turns out, IDs and classes are more powerful than I told you in Tutorial 2. Once you have created an ID or class, you can manufacture new styles that apply to elements within that ID or class. In other words, if you have an ID on a table, you can also style its cells:

This will separate the cells within the table and apply a black border to each of them. Like so:

Something similar can be done with link styles. Here's an example. Let's say you create a div (or table, or even a table cell; that's okay) that you call #navbar:

Your div will look like this:

(I've put a couple paragraphs in there to give it some height. Note also that in my case, I'm using a class rather than an ID, because I want to re-use this below.)

Naturally, with that dark-coloured background, you want your links to be light. And since you are going to make it obvious that this is a navigation bar, you don't really need underlining anymore either (yes, another very common question!). So here is what you might do:

Here is what your results will look like:

Hint: want that background to "spread out" a bit from the link? Add some padding. So now your hover style looks like this:

Link with padding

There is much more that you can do with links - adding borders, using display: block; to have them function like buttons, and much more. Check around the Internet; you will find a wealth of information for "fancifying" your hyperlinks.

---

Related tutorials:

Creating and Applying CSS Rules

Links and the Cascade: Getting the Fundamentals Right

 

« Return to tutorials main index.

all our docs most recent sites