For links there are 4 different options which you may already know, you have the standard link colour, you have the colour of the link when the mouse passes over it, you have the colour of the link once it has been clicked and you have the colour of an active link (while you have pressed the mouse on the link).
When writing these codes down many people have discussed about the order they should be written in, when a browser looks at a code it reads the top line first and works its way down, just the same as we read. I have seen many people ask about what order to put these attributes in and here is the correct way:
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
|
Here we have the standard link colour first, next we have the visited link colour, then the link on mouseover and finally the active link colour.
Each link attribute can be given any of the following attributes:
color
This can be either a hex value or a colour name
text-decoration
This can be any of the following none / underline / overline / line-through
font-weight
This can be any of the following normal / lighter / bold / bolder or can be given as a number from 100 - 900. They must be in the 100's or it will not work. e.g. 100 / 200 / 500 / 800 ect.
letter-spacing
This can be an amount of pixels. e.g. 3px will spread each letter 3 pixels away from each other.
background-color
This can be either a hex value or a colour name. This background is only the background colour for the text.
With all these attributes you will be able to customize your links in any way you want. To set up multiple tags in CSS I find the best way to separate them is to put each tag on a new line. E.G.
a:link {
text-decoration: none;
color: #000000;
letter-spacing: 500;
}
a:visited {
text-decoration: none;
color: #666666;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: green;
background: black;
}
a:active {
text-decoration: none;
color: red;
font-weight: normal;
}
|
Try copying this code into your external stylesheet and now look at your links, they have all changed from the default link colours to the colours and styles you have applied to them using the attributes and tags used above. Customize away!