lecture 3: handout

link style examples

Here are a couple of examples of ways you might style links. In each case I have included a <p> tag style definition as well, and a single line of actual HTML, in order to show you how properties are inherited. You could use these as a starting point in the practical exercise on slide E (coding and styling).

1. This set of styles will create links which are rendered in Garamond font (inherited from <p>) and will only be underlined when the mouse pointer hovers over them. Unvisited links are red and visited links orange.

p         { font-family: Garamond, Times, serif; color: #000000; font-size: 110%; }

a:link    { color: #ff0000; text-decoration: none; }
a:visited { color: #ff7700; text-decoration: none; }
a:hover   { text-decoration: underline; }

<p>This is a <a href="index_subject.html">link to the Subject Index</a></p>

2. This set of styles will create links in Verdana (again inherited from <p> - it is good practice to keep your font style and size for links the the same as for the surrounding block-level tag). They will be silver both for visited and unvisited links. When the mouse pointer hovers over them, the background colour will turn white (obviously to have a good effect this would need to be placed on a page which has a background colour other than white).

p         { font-family: Verdana, Arial, sans-serif; color: #000000; font-size: 100%; }

a:link    { color: #c0c0c0; }
a:visited { color: #c0c0c0; }
a:hover   { background-color: #ffffff; }

<p>This is a <a href="index_subject.html">link to the Subject Index</a></p>

chunks of information

Here are the blank boxes for you to fill in as advised on slide F. Do remember that the number of boxes is just a very rough guide; you may feel a different number is more appropriate for your own purposes. If so, add other boxes in the blank space.