DevPapers - article Styling your links with CSS

1. Changing the text colours

You can give links any colour you want using CSS. In your stylesheet try this:

a:link {
color:#6699cc;
}
a:hover {
color:#f60051
}
a:visited {
color:#999999;
}

Save it and take a look. It should give you a bright blue for the link, which changes to a pink colour when you hover over it. If the link has been visited it will appear in a very light grey.

2. Changing the underline

Did you know you don't have to have your links underlined? Using CSS you can remove this. Let's remove it for normal links, but we'll have it appear when we hover the mouse over them. Change your CSS to this:

a:link {
color:#6699cc;
text-decoration:none;
}
a:hover {
color:#f60051
text-decoration:underline;
}
a:visited {
color:#999999;
text-decoration:none;
}

If you look at the results of the above example you'll see that the blue link is no longer underlined. If you hover over it, not only does it change colour, but it becomes underlined too. If you don't want the underline to appear, just change the text-decoration:underline to text-decoration:none.

3. Changing the underline colour

Want the text to be a different colour to the underline? It's easy with CSS.

Change your stylesheet to this:

a:link {
color:#6699cc;
text-decoration:none;
border-bottom:1px solid #00ff00;
}
a:hover {
color:#f60051
text-decoration:none;
border-bottom:1px solid #ffcc00;
}
a:visited {
color:#999999;
text-decoration:none;
border-bottom:none;
}

Save it and take a look. The normal link now has a different colour underline to the text. If you hover over it, not only does the text change colour but so does the underline. If you don't want it to appear you can just set the border-bottom to none as in the a:visited part.

4. The background colour

You can even change the background colour of the link. Try this example:

a:link {
color:#6699cc;
text-decoration:none;
border-bottom:1px solid #00ff00;
background-color:#000000;
}
a:hover {
color:#f60051
text-decoration:none;
border-bottom:1px solid #ffcc00;
background-color:#cededb;
}
a:visited {
color:#999999;
text-decoration:none;
border-bottom:none;
background-colour:red;
}

Save it and view the results. Your links should now have different coloured backgrounds.

Obviously the colours leave a lot to be desired, but you should now see just how easy it is to add a bit of extra style to your links using CSS.