<< .. Go to : : Syllabus : : Schedule : : Exercise 3 : : Demo 3A : : Demo 3B : : Demo 3C : : Demo 3D : : All Class Demos .. >>

Exercise 3 Demo: Part C : CSS - Changing Link Colors

This is the HTML and CSS you will need for Part C of Exercise.

CSS STYLES: Changing Link Colors

Browser have default settings for link colors:
blue for links (before you visit them)
purple for visited links (after you have been to the linked page and returned)
and red for active links (while the mouse is clicking on the link)

You can change these colors. Do this by adding the following selectors (4 different ones) and property: value pairs. The values can be in hex code or browser friendly colors names.

This is the order they should appear in your code.

<!DOCTYPE html>

<html>
<head>
<title>
Links </title>

<style type="text/css">

a:link {color: #FF6600; } changes the original link color - using a hex code

a:visited {color: springgreen; } changes the visited link color - using a color name (after you have clicked on it and returned)

a:hover {color: #xxxxxx; } changes the hover link color (when the mouse passes over the link)

a:active {color: #xxxxxx; } changes the active link color (when you are pressing down on the link)

Try a different color set for each page.

Be sure to link all your pages in this exercise.

There are many other property value pairs you can assign to your links, but color is a good place to start.

</style> Be sure to close your style tag before closing the head of your document and opening the body tag.

For more about using Links go to Part D of Demo 3.

To go back to Part B of Demo 3.

Go back to the Exercise 3 page.

© Claudia Faulk. Updated 9.17