Applying CSS to your links allows you to do all sorts of nice roll-over effects and advanced text highlighting. You will also be able to have many sets of links on a single page, all with different formatting.

CSS LINK BLOCK

There are four stylesheet entities that govern how your links look:

a:link { }
a:visited { }
a:hover { }
a:active { }

The order you define these in is important. If you rearrange them your hover effects may stop working, as they will be overridden. Just make sure you have them ordered as I have above and you won’t have any problems.

sourcetip: There’s a clever little mnemonic that makes it easy to remember the correct order to define these pseudo-elements in your stylesheet; just remember those famous knuckle-tatoos: LoVe/HAte, the capitalised letters each standing for one of the four elements.

Now, let's have a look at some of the more common formatting options you have:

color

allows you to change the colour of the text. Use web-safe or named colours. The best rollovers change just this, I reckon.

text-decoration

gives you a few options on the formatting of your links. Set this to none to get rid of the underlines on links. If you want to bring them back, or put them in as a hover attribute, use text-decoration: underline. To get overline effects (a line above the text), set it to overline.

font-weight

allows you to change the boldness of the text. Set to bold or normal. There are other more specific values but they aren't supported by the browsers yet.

font-style

is the command to change your text to italics. Set it to italic or normal to override.

font-family

like you've seen before, this changes the typeface.

font-size

and again. Quite simple indeed.

background-color

allows you to give your link-text a background color. Especially helpful for highlighting on hovers.

If you want more information on all of these properties, plus a few more advanced ones, read CSS and Text.

Setting up multiple schemes

This involves using classes, and is very simple. You simply put the class name (and its dot) in with the link part, like so:

a.donkey:link {color: red; text-decoration: none; }
a.donkey:visited {color: purple; text-decoration: none; }
a.donkey:hover {color: orange; text-decoration: underline; }
a.donkey:active {color: blue; }

a.diddy:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.diddy:visited {color: #894f7b; font-weight: bold; }
a.diddy:hover {text-decoration: overline; background-color: #003399; }
a.diddy:active {color: red; }

You certainly don't have to call them crap names like that, but that was just to show you. Then, just class your links by adding in class="diddy" into the a tag.
    As you can probably see, I use multiple link collections throughout HTMLSource (I now have a huge 10 schemes in my stylesheet). They are hugely useful when you need links with appropriately light colours to go on a navigation bar with a dark background, or to fulfil specific purposes (like the secondary links I place everywhere, for additional information).

sourcetip: If you're going to use a few classes, leave your most used links without a class. This will save you from having to add class="whatever" to too many links.

Inheritance

When you have the need to add in extra link groups beyond the default group (the one without the class), further groups will inherit or take on the formatting of the default group. If you have defined your default links as bold, all future link classes will be bold unless you put them back to normal using font-weight: normal. This goes the same for all other attributes.

Hover guidelines

These are just a few tips and suggestions on how you use the hover ability.

Don't let it affect surrounding text

If your hover-link starts pushing other text and page elements around, you should leave it out or tone it down. This happens most if you change the font face or size, but you can get minor movement from changing to bold, italicised or underlined text. Test it and if anything moves, take out the effects.

Simple changes are the best

Try to change only one or two things in a hover. Switch a colour, maybe add an underline, but that should be all. It doesn't need to be a major event when a user hovers over a link, just a subtle effect to help them out and add some style to your page.

Colour choices

Among the major corporate websites, red seems to be the popular choice for hover changes, for some reason. Personally, I don't like it at all. Supposedly, it is the easiest colour to recognise and so make your links more usable, but you should use a colour that compliments your site instead. Red is a good colour for a:active, however.

Image Links

By default, any image that is contained within a link will be given a large blue border to signify that it’s part of the link. This generally looks crap, and so we used the border attribute to magic it away, like so

<a href="/"><img src="company-logo.png" alt="Company logo" border="0" /></a>

With a single CSS rule, we can take care of all of these borders without touching the HTML code. Simply add this line to your CSS file:

a img {border: none; }

Your no longer need those border attributes. This one lightweight rule will command all of your linked images to shrug off any borders your browser tries to surround them with.