Defining Links

Right now there is only one link in the wish document. It's located in the notes section, in footnote number 9. The target page is non-existent, so you need to change the link to this target.

Test the page and make certain the link takes you to the "Muddle Machine" article. The link on your page should displays as blue, underlined text. Let's redefine how the link will look! The basic syntax for defining a link in the style section looks like this:

a {property: value}

We are going to change the link color, and get rid of the underline! Do you remember the text-decoration property? One of the possible values is none! That's how we can wipe out the underline:

<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%;}
a {color:#669900; text-decoration:none;}
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;}
.footnote {font-size: .6em; vertical-align: text-top;}
.breaks {font-size:2em; color:#FF6600; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;}
#thanks {font-style:italic}
}
-->
</style>

Test it! Now let's get the underline to appear when the mouse passes over the link. You can redefine the look of the "hover" state of a link using the following syntax:

a hover {property: value}

While you are at it, why not redefine the look of a link that's already been visited. Instead of accepting the default purple text, try this syntax:

a visited {property: value}

That's cool! Experiment with this for a minute! Find an anchor, hover, and visited combination that looks good to you!