CSS hyperlink properties 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.
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: #FF6633;
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 right. 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 .rightcoldiv
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">
.rightcoldiv a:link {
color: #FFFF66;
text-decoration: underline;
}
.rightcoldiv a:visited {
color: #CCCCFF;
text-decoration: underline;
}
.rightcoldiv a:link:hover {
color: #FFFFFF;
text-decoration: underline;
}
.rightcoldiv a:active {
color: #FF99CC;
text-decoration: overline underline;
}
</style>
The only difference is that I have placed .rightcoldiv 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.