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:
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:
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:
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.
Leave a Reply