CSS (Cascading Style Sheets)

Making Links

There are some fun things you can do with links, but I'll show you the basics, like always.

Here is an example of coding to change the link styles:

• a:link {color: #FF0000}
• a:visited {color: #00FF00}
• a:hover {color: #FF00FF}
• a:active {color: #0000FF}

You can change not only the colors of the links, but you can use the same coding you use for regular text. For example, you can add in text-decorations and change font families, etc.

• a:link {color: #FF0000; text-decoration: none}
• a:visited {color: #00FF00; text-decoration: none}
• a:hover {color: #FF00FF; text-decoration: underline}
• a:active {color: #0000FF; text-decoration: none}

This example above has changed the text-decoration so that when you hover over a link, not only does it change color, but it underlines it as well.

• a:link {color: #FF0000; text-decoration: none; font-family: verdana}
• a:visited {color: #00FF00; text-decoration: none; font-family: arial}
• a:hover {color: #FF00FF; text-decoration: underline; font-family: arial}
• a:active {color: #0000FF; text-decoration: none; font-family: verdana}

This above example made it so that when there is a link, it is the Verdana font, but when you hover it, or it's already been visited, it's Arial, and when it's currently active, it's Verdana. Follow?

For more information on making links different: http://www.w3schools.com/css/css_pseudo_classes.asp