Custom Links

Let's advance from redefining basic links, to creating custom links independent of one another. Let's by creating named anchors that link from each footnote in the body of the text to it's corresponding footnote at the end of the text. Return to the lesson on Named Anchors if you don't remember how to link inside a document.

I'm going to call the first anchor "f1" and continue on with "f2", "f3" and so on. You may keep the span class tag and wrap the <a href> tag around the text you want to turn into a link like this:

<span class="footnote"><a href="#f1">[1]</a></span>

Now let's move back up to the style section and look at defining the look of anchors that are part of the "footnote" class. The basic syntax for creating a style unique to a class is this:

.class-name a {property: value;}

It follows that customized hover and visited styles can be defined like this:

.class-name a:hover {property: value;}
.class-name a:visited {property: value;}

Ok, create a custom look for the footnotes links:

<style type="text/css">
<!--
body {background-color: #cccccc; color:#FFFF33; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%; font-size:100.1%;}
h1 {font-size:2em; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-transform: capitalize; font-weight:normal;}
p {font-size: 1em; color: #000000; text-align: justify; line-height: 1.2;}
p:first-letter {color: inherit; font-size: 2em; font-weight: 100;}
.notes {font-size: .8em;}
.breaks {font-size:2em; color:#FF6600; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;}
#thanks {font-style:italic}
a {text-decoration:none; color:#669900}
.footnote {font-size: .6em; vertical-align: text-top;}
.footnote a{color:#FF00FF; text-decoration:none;}
.footnote a:hover{color:#FFCCFF;}
.footnote a:visited{color:#FF3300; text-decoration:none}

-->
</style>

Mine looks like this:

footnoteLink