Exercise 4 Demo: Part D : CSS - Changing Link Colors
This is the HTML and CSS you will need for Part D of Exercise.
STYLES: 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 shold appear in your code.
<!DOCTYPE html> Links
<html>
<head>
<title> </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. And remember to close your style tag before closing out the head of your document.
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.
Go Back to Part C of Demo 4 for Jump Links.
Go Back to Part B of Demo 4 for Image and Email Links.
Go back to Part A of Demo 4 for Absolute and Relative Links.
Go back to the Exercise 4 page.
© Claudia Faulk. Created in 2008. Updated 1.15