Getting Started with Cascading Style Sheets - Part 5
Part 5 - Hyperlinks
Part four showed how colour control can be improved within a web page, particularly with backgrounds. In this part we'll move on to hyperlinks and examine the different ways the appearance and function can be modified.
The main way to change the behaviour and appearance of links is by using four property selectors called link, visited, active and hover. Most of these work fine with version 4 browsers and above although Netscape support for hover is only included in versions 6 onwards so beware.
You can set the link styles for both a single link as well as for the whole page and we'll look at both techniques here. By default, any customisations to link properties apply to the entire page so we'll look at that first.
A:link
The A:link property defines the style of a normal link that is to say one that hasn't been clicked on yet.
A:visited
The A:visited property not surprisingly defines the style for a link that has been clicked on at some time.
A:active
The A:active property defines the style of a link that is active. A link is said to be active when you click on it.
A:hover
The A:hover property defines the style for hovered link. A link is hovered when the mouse pointer moves over it.
Right, that list probably didn't help an awful lot as the properties are pretty self-explanatory. Let's dive in with some examples to clarify things.
The first example changes the colour of a link to green when the mouse hovers over it. Remember the 'faked comment' technique for ensuring our code doesn't confuse browsers that don't support style sheets?
<style type="text/css">
<!-
A:hover { color:green }
-->
</style>
Next up is a way or removing the underline of a link until the mouse moves over it. The text-decoration code was discussed in part 3.
<style type="text/css">
<!-
A:link { text-decoration:none }
A:visited { text-decoration:none }
-->
</style>
The opposite extreme is having both underlined and overlined links. In this example I'll just include the basic code so don't forget to include the <style> type lines etc when you use it for real.
A:hover { text-decoration: underline overline }
Now for a really radical one. This example changes the background colour around a link to red when hovered or active.
A:link { color:black;text-decoration:underline }
A:visited {color:black;text-decoration:underline }
A:hover { background: af0000;color:white;text-decoration:none }
A:active { color:af0000;text-decoration:none }
Those few examples should show you enough to be able to experiment yourself with your own variations. Now we'll look at how to control individual links as opposed to setting page wide styles. This is done by setting up context dependent selectors which aren't as bad as they sound.
Essentially you set up different styles with each being specified in terms of an outer style. Once we have the multiple styles, we can use the HTML span tag to control which style gets used where. This is best explained by an example. Here we define two styles, the first has no underline showing unless the mouse hovers over the link at which point it is underlined. The second starts off underlined but adds an overline when the mouse hovers over it.
<html>
<head>
<style type="text/css">
<!--
.myclass1 A:link { text-decoration: none }
.myclass1 A:hover { text-decoration: underline }
.myclass2 A:link { text-decoration: underline }
.myclass2 A:hover { text-decoration: underline overline }
-->
</style>
</head>
<body>
<br><br>
<span class="myclass1">
<a href="http://www.aol.com">AOL</>
</span>
<br><br>
<span class="myclass2">
<a href="http://www.netscape.com">Netscape</a>
</span>
</html>
The primary advantage of using the span tag is that you can set the layout for a whole group of links at once as opposed to having to do them one at a time.
There isn't much else to say about what can be done with links so the best thing to do is to try different variations and see what looks best on your web page.
That wraps things up for this beginners guide to style sheets. We have only covered the basics to get you going and to give you a flavour of what is possible but hopefully there has been enough here to get you started. Get coding!
The rest of the series:
