Styling Links with CSS

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

• normal links
• links that have already been visited
• links that are being clicked on, and
• links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Different link states

CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.

Here are the 4 pseudo-classes that you can use to select and style the different link states in CSS:

a:link

Selects links that have never been visited in the browser

a:visited

Selects links that have been visited before in the browser

a:active

Selects links that are being clicked on or otherwise activated by the user

a:hover

Selects links that are being hovered over by the user’s mouse cursor

Selecting links regardless of their state

As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:

a { color: pink; } /* Set all links to pink */

However, note that using a pseudo-class overrides any styling that you’ve set using the a selector. For example, the following code makes all links pink except visited links, which become green:

a { color: pink; }
a:visited { color: green; }

Mixing pseudo-classes with classes and ids

You might want to style only certain types of links within your website. To do this, assign a class to the links:

<a class="nav">Home</a>

You can then style those links using pseudo-classes as follows:

/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }

If you only want to style a single link on the page, you can use an id instead of a class, and select the link’s pseudo-classes in the same way — for example:

<a id="home" href="home.html">Home</a>

...

/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }

Some examples

Once you’ve selected the particular link state you’re interested in, you can apply any styles you want to that state, as you’ll see in the following examples.

Styling link colours

It’s easy to change the colour of links from the default values. On most browsers, the default link colours are:

:link

blue

:visited

purple

:active

red

Here are some examples of how to change link colours:

/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }

/* Use the default colours except for links that are being
   clicked on, which become yellow instead of red */
a:active { color: yellow; }

/* Set unvisited links to green; visited and hovered
   links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }

Turning off underlines on links

To remove the underlining from text links, use the text-decoration property, as follows:

a { text-decoration: none; }

To remove the underlining from links except when they’re hovered over, use:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Giving links a button effect

You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:

a
{
  color: #000;
  background-color: #f0f0f0;
  padding: 2px 11px;
  border: 2px outset #fafafa;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
}

Here’s what it looks like:

link

Adding background images to links

Here’s another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:

a
{ 
  background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
  padding: 3px 0 4px 34px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

And here’s how it looks:

link

Replacing link text with an image

What if you wanted to use just an image for a link, without any text? It’s a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here’s how it’s done.

First, put your link text within a span element in your markup:

<a href="home.html"><span>Home</span></a>

Then you can style the link as follows:

a
{
  background: #fff url('remote-control-home.gif') no-repeat 0 0;
  display: block;
  width: 114px;
  height: 24px;
}

a span
{
  display: none;
}

First the CSS sets the button as a background image on the link, and adjusts the link’s width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.

Here’s how the above example looks:

link>

Creating image rollover effects

Finally, if you really want to go to town with your links, you can add nice-looking image rollovers to them. Find out how to do this in Making CSS rollover buttons.