From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Links are very common on Web pages, but many Web designers don't realize the power that they have with CSS to manipulate and manage their links effectively. You can define links with visited, hover, and active states. You can also work with borders and backgrounds to give your links more pizzaz or make them look like buttons or even images.

Most Web designers start out by defining a style on the a tag:

a { color: red; }

This will style all aspects of the link (hover, visited, and active). To style each part separately, you must use link pseudo-classes.

Link Pseudo-Classes

There are four basic types of link pseudo-classes you can define:

• :link - this is the default style for the link
• :visited - after a link has been clicked
• :hover - as a mouse is poised over a link (pre-click)
• :active - right as the link is being clicked

To define a link pseudo-class, use it with the a tag in your CSS selector. So, to change the visited color of all your links to grey, write:

a:visited { color: grey; }

If you style one link pseudo-class, it's a good idea to style them all. That way you won't be surprised by extraneous results. So if you just want to change the visited color to grey, while all other pseudo-properties of your links remain black, you'd write:

a:link, a:hover, a:active { color: black; }
a:visited { color: grey; }

Change the Link Colors

The most popular way to style links is to change the color when the mouse hovers over it:

a { color: #00f; }
a:hover { color: #0f0; }

view

But don't forget that you can affect how the link looks as they are clicking on it with the :active property:

a { color: #00f; }
a:active { color: #f00; }

view

Or how the link looks after you've visited it with the :visited property:

a { color: #00f; }
a:visited { color: #f0f; }

view

To put it all together:

a { color: #00f; }
a:visited { color: #f0f; }
a:hover { color: #0f0; }
a:active { color: #f00; }

view

Put Backgrounds on the Links to Add Icons or Bullets

You can put a background on a link as in the Stylish Backgrounds article, but by playing with the background a little, you can create a link that has an associated icon. Choose an icon that is small, around 15px by 15px, unless your text is larger. Place the background to one side of the link and set the repeat option to no-repeat. Then, padd the link so that the text within the link is moved over far enough to the left or right to see the icon.

a {
padding: 0 2px 1px 15px;
background: #fff url(ball.gif) left center no-repeat;
color: #c00;
}

view

Once you've got your icon, you can set a different image as your hover, active, and visited icons to make the link change:

a {
padding: 0 2px 1px 15px;
background: #fff url(ball.gif) left center no-repeat;
color: #c00;
}
a:hover {
background: #fff url(ball2.gif) left center no-repeat;
}
a:active {
background: #fff url(ball3.gif) left center no-repeat;
}

view

Make Your Links Look Like Buttons

Buttons are very popular, but until CSS came along, you had to create buttons using images, which makes your pages take longer to load. Luckily, there is a border style that can help you create a button-like effect easily with CSS.

a {
border: 4px outset;
padding: 2px;
text-decoration: none;
}
a:active {
border: 4px inset;
}

view

Note, when you put colors on the outset and inset styles, browsers are not as likely to render them as you might expect. So, here's a fancier button with colored borders:

a {
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
border-color : #69f #00f #00f #69f;
}

view

And you can affect the hover and active styles of a button link as well, just use those pseudo-classes:

a:link {
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
border-color : #69f #00f #00f #69f;
}
a:hover { border-color: #ccc; }

view

Don't Let Your Links Be Boring

When you use links, think about how they will impact your readers. Links can be fun or they can be just underlined text on your Web pages. Why not make your links part of the design?