CSS hyperlink proporties with examples

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.

Standard CSS hyperlink

Here is an example of the basic code.

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:-

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

Using multiple 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 my 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.

The only difference is that I have placed .leftcoldiv 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.

Home