CSS and Links
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.
This page was last updated on 2012-08-21
Basic CSS Link block
There are four stylesheet entities that govern how your links look:
a:link { }
a:visited { }
a:hover { }
a:active { }
These four selectors basically cover the old link, vlink and alink <body> attributes, but the last one allows you to set up text roll-over effects. Your a:hover line comes into play when a user puts their mouse on a link. The link can change in appearance in many ways, from a simple colour switch to a complete morph into another typeface and size. These effects are very helpful in showing the reader exactly which link they are pointing at. They look great too.
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.
Browser Compatibility Note:
Not a problem for this one. Hover effects on links have been supported by all browsers ever since Internet Explorer 3! You can even apply hover effects to elements that aren’t links, for example p:hover {background: #ffb; }. This will work in all modern browsers, but not Internet Explorer 6.
Setting up multiple schemes
This involves using CSS classes, and is quite simple. You just choose a name for your class (for example, “nav”), and put this name (and a dot) in with the link part, like so:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: red; }
a.external:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover {text-decoration: overline; background-color: #003399; }
a.external:active {color: red; }
Here I’ve set up two link classes that you could use: one for links in a navigation area, and one for links that point to external websites. Then, just tell your browser which set of styles to use by adding in class attributes to the a elements:
This first link goes to the <a href="/" class="nav">Homepage</a>.
This one goes to an <a href="http://example.com" class="external">External site</a>.
As you can probably see, I use multiple link collections throughout HTML Source. They are hugely useful when you need links with appropriately light colours to go on a navigation bar with a dark background, or to fulfill specific purposes (like the secondary links I place everywhere, for additional information).
sourcetip: If you're going to use a few classes, leave the type of links you use most without a class. For example, the links in the main content area of the page. 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 shoddy, 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.
