CSS hyperlink properties with different colours

Heading Tags Info

Using css to create custom text hyperlinks is easier than you think. .

There are four property options when using CSS for page links and it is important that they are placed in the order below.

  • 1. Link - This is the default link on the page.
  • 2. Visited - Shows the page has already been viewed.
  • 3. Hover - The colour changes when a mouse is placed over it.
  • 4. Active - A mouse is over the link and the left mouse button is pressed and held.

Using the Active setting is pretty pointless because it is not supported by all Browsers, so I have ommitted it from my examples.

There are a few ways of creating this effect and the steps below are just a small example.

Standard CSS hyperlink

Here is an example of the basic code.


<style type="text/css">
a:link { color: #CC0000; }
a:visited { color: #FF6600; }
a:link:hover { color: #FF6633; }
</style>

You can now go a little further by adding properties like bold, underline, overline and normal by using font-weight and text-decoration and finish up with something like this:-


<style type="text/css">
a:link {
color: #CC0000;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #FF6600;
font-weight: bold;
text-decoration: underline;
}
a:link:hover {
color: #400000;
font-weight: bold;
text-decoration: none;
}
</style>

By experimenting with the above examples you will be able to have your links matching your current colours of your web page.


Using different format hyperlinks on the same page.

This tutorial is assuming you already use css for your page layout.

Your page layout may contain areas that have a different background colours just as mine has, just like the Menu section on the left. The problem I had here was that the standard hyperlink settings I use in my main sections didn't show up clearly enough in the menu box. If I used colours that stood out in my menu box I found that they didn't show clearly in my main area.

My menu box is created from a css class .leftcoldiv
I needed to create another set of text hyperlink rules that would only display inside my menu box while my standard rules would only display in my main content area. Below is the code that I use.


<style type="text/css">
.hyperlink2 a:link {
color: #004000;
text-decoration: underline;
}
.hyperlink2 a:visited {
color: #FF0000;
text-decoration: underline;
}
.hyperlink2 a:link:hover {
color: #FFFFFF;
text-decoration: none;
}
.hyperlink2 a:active {
color: #FF99CC;
text-decoration: underline;
}
</style>

Just copy the code above and place it above the </HEAD> tag on your page.

The only difference is that I have placed .hyperlink2 before each rule so I can now have 2 completely different formatted text links.
You could have several different sets for different coloured backgrounds, the choice is yours.

One thing you may have spotted in the above code that I have used the tag a:active, this only works in IE and NS and only means that if you place your mouse over a link and press the mouse button the link will show with a line above and below, doesn't really have much use but I included it just as an example.

Here is one example of how you would use your new link colours within a DIV

<div class="hyperlink2" align="center"><p><a href="coffeecup.html">Coffeecup Coupon Code</a></p></div>

 

Below is the result, and you will see that for the :hover, I set the text decoration to none, to remove the Underline just to show how it works.