link styles: pseudo-classes

This week's lecture dealt more with conceptual stuff than practical, and only mentioned the styling of links very briefly. It's important you know how to do this, however: firstly and obviously because it's an important element of your page's appearance (very few pages have no links at all). Second, because it forms a kind of stepping-stone to a more sophisticated use of style sheets than we've managed so far. So please read this page carefully and practice what you read on your own site.

Applying styles to links is done in broadly the same way as for other tags. Place the style definitions in the style sheet under the heading, "a". Links will inherit properties off whatever block-level tags they are included in, so it is relatively common that all you define in the style sheet is the colour of links. The style sheet definition for this site's links is, from one point of view, simple:

{ color: #0000FF; }

You can, of course, define your links to have a different font style. (Partly this is how I get the links on the left of these pages to appear in a monospace font, although not exactly: see the page on classes in lecture 4.) I would not recommend defining them to have a different text size. As they are inline tags, this could make your page look untidy.

Note that all browsers default to showing links with an underline. It is not therefore necessary for you to do this with your style definitions of <a> tags:

{ color: #0000FF; text-decoration: underline; }

...although you could, if you wanted, do this:

{ color: #0000FF; text-decoration: none; }

If you do (or even if you leave the underline in), make sure your link colour is clearly distinguished from the rest of the text! Having to hunt around for links is one of the badges of bad web design. This is perhaps the most important recommendation for good link use: others can be found on the page of navigation tips.

I've deliberately avoided including the tag name in the style sheet definitions above. There is an added level of complication with defining styles for <a> tags. It's not an arbitrary one though: in fact it's a useful introduction to the idea of classes of styles. This is when, in different circumstances, different style definitions can be applied to the same tag. We've already seen the use of ad hoc styles, but if you want to use an ad hoc style more than once the style attribute starts to become cumbersome.

Why do you need this with links? Mainly because a convention has developed that links have more than one "state". Browsers can be instructed to show links in a different way if the user has already visited the page. You have probably noticed by now that this site shows link text in a slightly darker blue if this is the case. (How does the browser "know" this? The answer is to do with a facility called the cache, which we will mention in lecture 6. It's the cache that, for instance, means your Back button works.)

Links that have not been visited are therefore one "class" of links, and links that have been visited are another "class". And each of these classes can have a different style applied to them. With full classes - discussed, as I've said, in lecture 4 - you have to decide when to apply one class or the other. But with pseudo-classes, which is what links used, you leave it up to the browser to decide. In each case you can define a separate pseudo-class of the <a> tag's style definition.

The upshot of all this is that you invariably need at least two style definitions for the <a> tag. Here is a random example (not drawn from any site in particular:

a:link { color: #ff0000;
         text-decoration: none; }

a:visited { color: #ff7700;
         text-decoration: none; }

As ever, be exact. Use only a colon after the "a" and don't put spaces in there. Anyway, this would render unvisited links in red, and visited links in orange: both without underlining.

It is not obligatory that you choose a different colour for visited links, but even if you want the two pseudo-classes to be the same, define both in the style sheet. If you do not define one of these the browser will apply its default colouring. Most browsers are set up to show links in blue and visited links in purple. If, say, your site has a dark background and you define your unvisited links as yellow, that's fine: but if you don't at the same time assign properties to a:visited the browser will revert to its default and you may find your links becoming very hard to read once the pages make their way into readers' caches.

There is a third pseudo-class which is very useful, and here is an example:

a:hover { text-decoration: underline; }

"hover" does not work on all browsers but it's useful to include it anyway. Again you should have noticed by now that there is a third colour for links on this site, a paler blue which is applied only when your mouse pointer is "hovering" over a link. If the example just given were combined with the a:link and a:visited pseudo-classes already noted, this would cause the underline to "reappear" during a hover. Some people even define a different background colour to appear during a hover. (Don't change the font size or type though: this can cause unsightly "jumping" of text on the screen. ) a:hover inherits properties off the other two classes (which are mutually exclusive, as you may have deduced) so you only need to define whatever it is that has changed. By the way, a:hover does not seem to work unless it is placed after the other two "a" definitions in the style sheet.

(In fact there is a fourth class, "a:active", but I find this limited in application and never use it.)

As ever the best way to get the hang of all this is to practise on your own site. As the lecture noted, your first course work is fairly imminent and you are expected to use links in that work, and style them appropriately, so it's a good time to start!

back to the top

appendix: some other pseudo-classes

While we're on the subject, there are a couple of other pseudo-classes, or pseudo-elements. These are first-line and first-letter which can apply to the <p> tag. Of course, if you want to apply formatting to the first letter of a paragraph this may be something to only do on special occasions - such as this paragraph.

Theoretically, and I use that word very advisedly, that effect could be produced by a style sheet entry similar to this one:

p.firstpara:first-letter { font-size: xx-large; color: #ff0000; float: left; }

I haven't specifically mentioned the float property on the style sheet reference page, and this is its only appearance in this site. Without it, you'd have the letter standing above the text (which would also have been a reasonable effect). In any case I also have to admit I've cheated and not used the "first-letter" pseudo-class, as that remains unreliable - I've done it with a style attribute within a <span> tag enclosing that initial W. Not only that, but those viewing this page on some older browsers are probably wondering what I'm yammering on about because to them, that first paragraph probably looks like all the others. Pseudo-classes, particularly the two mentioned in this appendix, are still somewhat shakily supported, even more so than the rest of CSS. Use with caution, and assume that most people won't see them, rather than the other way around.

Back to the top

Back to the menu for lesson 3