Pseudo Classes Exercise - CSS Rollovers

In this exercise you will be using embedded styles (found in the head of the document) to create a rollover affect for links. You will make use of the pseudo classes of the a tag. Here are the pseudo classes:

Pseudo-classes use a selector followed by a colon (:) and a pre-determined pseudo-class name. They are case-sensitive. Examples are shown below.

Pseudo-Class	What it does	Examples to code in the HEAD section
:hover	Changes the element when the mouse is over it.	a:hover {color: #0000FF;}
:active	Changes the element when the mouse is clicked.	a:active {color: #FF0000;}
:focus	Changes the element when the element is ready for keyboard input.	a:focus {color: #000000;}
:link	Changes the appearance of a link.	a:link {color: #0000FF;}
:visited	Changes the appearance of a visited link.	a:visited {color: #FF0000;}

Go to the class web site and click on the links button at the top of the page. Save this page as rollover.html in your css folder. Embed the four pseudo classes into the head of the document so they have the following styles:

a:hover - make the text color dark red, the background blue and remove the text decoration by saying none, this will remove the underlining of the link.

a:active - make the text color blue, the background color red and remove the underlining.

a:link - text color blue, no underlining and no background color.

a:visisted - make the text color purple and no underlining.

Make a copy of this file and save it as myrollover.html. Modify these styles and add some new properties making the changes even more noticeable.

Show both examples and your code for each to your instructor for teacher check

How could I make these changes affect every link on every page of my web site?