CSS Hyperlinks

Posted in CSS | Posted on 08-07-2009-05-2008

CSS technology gives us the creative power over how we want our links displayed.  We no longer have to settle for the generic blue underlined links of the past.  We can have a link with a yellow background that is green and bold.  The link can be a background image.  There are a lot of possibilities here.

Let’s take a look at a small example.  This example will give you an idea of the basic fundamentals of css hyperlinks.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Hyperlinks</title>
<style type=”text/css”>body {
background: #e2e2e2;
}

a:link {
border: 1px solid #4a4a4a;
font: bold 14px Verdana;
background: #c00;
color: #fff;
text-decoration: none;
}
a.msn:hover {
color: #1554f4;
background: #f49315;
border: 3px solid #4a4a4a;
}
a.google:hover {
color: #3a65ef;
background: #fff;
border: 3px solid #4a4a4a;
}
a.yahoo:hover {
color: #f41515;
background: #cdd8fc;
border: 3px solid #4a4a4a;
}

</style>
</head>

<body>

<a href=”http://www.msn.com” class=”msn”>MSN Search</a>
<br /><br />
<a href=”http://www.google.com” class=”google”>Google Search</a>
<br /><br />
<a href=”http://www.yahoo.com” class=”yahoo”>Yahoo Search</a>

</body>
</html>

In this example, the code in bold is where we will place our attention.

a:link {
border: 1px solid #4a4a4a;
font: bold 14px Verdana;
background: #c00;
color: #fff;
text-decoration: none;
}

These lines of css code will display all html anchor tags with links in the following manner: they will have a 1 pixel black border, be 14 pixels bold Verdana, have a red background with a white font, and the links will not be underlined.

a.msn:hover {
color: #1554f4;
background: #f49315;
border: 3px solid #4a4a4a;
}

These lines of codes define how our anchor tags that belong to the class “msn” will behave when a user places their mouse over the link.
For the “msn” class, the font color will be blue with an orange background. There will also be a 3 pixel black border.

The concept is the same for the “google” and “yahoo” classes. When a user hovers over their links, their css styles will be displayed respectively.

Final Word

CSS hyperlinks is not at all complex.  By learning the features of CSS, you can become more creative with your anchor links.  Experiment with this example.  Play with the backgrounds, fonts, and borders.