WWW FAQs: How do I change the appearance of links in my pages?

2006-07-26: Making a link in a web page is probably the first thing we all learn to do in XHTML. An ordinary link looks like this:


<a href="http://www.boutell.com/">Visit Boutell.Com, Inc.</a>

That's fine... if you don't mind blue text with a blue underline. But what if that's not what you want? Blue, underlined text is good because users always understand that they are looking at a link. But it's not the only reasonable choice. And in some page designs, it might clash with the foreground, or turn completely invisible.

The solution is to use CSS. With CSS, we can change the link "style" to whatever suits our purposes.

There are many styles that might affect the appearance of links. Here's a quick example of a web page in which links have a different appearance. For simplicity, I've put the CSS code in a style element, but you also can reference it in an external style sheet, and that's the best approach to apply a single set of styles to an entire site.


<html>
<head>
<title>Custom Links</title>
<style>
body {
background-color: blue;
color: white;
}

A:link {
text-decoration: none;
color: red;
}

A:visited {
text-decoration: none;
color: yellow;
}

A:hover {
text-decoration: underline;
color: orange;
}
</style>
</head>
<body>
On this page, the background is blue. So we need to change the
link colors.
<p>
<a href="http://www.boutell.com/">Visit Boutell.Com, Inc.</a>
</body>
</html>

Notice that I set the style for three different CSS "pseudoclasses" of the A element. I could just set the style for the A element and leave it at that - but then there would be no distinction between links we have not visited, links we have visited before, and links the mouse is currently hovering over. And those are useful distinctions to make, particularly displaying the underline when the mouse is over the link.

In this case, I chose to use different colors for unvisited and visited links (the font-color style), and to display an underline only when the mouse is hovering over the link text.

Of course, images can also be part of links. In that situation, the most common question is how to get rid of the blue link border. You can do that with the border-style: none style. For more information, see how do I remove the blue border around my image and how do I change the color of the border around my image?

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.