CSS Pseudo-classes

These are not really classes but they are a bit similar.  They change the appearance of elements when the user does things.  The most obvious example is to change the appearance of links but there are other uses as well.

Open your HTML template and save it as pseudo.html.  Add a hyperlink in this new page (an a element) which leads to boxes.html.  Save and test.

In the embedded style sheet at the top of pseudo.html add this rule set:

a:hover {
    color:green;
}

The a selector is the same as if you were just styling all links (a type selector).  The colon identifies a pseudo-class.  The pseudo-class name is hover and means "when the user hovers over the link apply the following styles".

Save and refresh in the browser.  Hover over the link and it should turn green. 

You can include any styles in the rule set (e.g. make the font different, change size, change the background etc.).  Try adding a new rule.

Add a new rule set:

a:visited {
    color:red;
}

The link should appear red as you have visited the page boxes.html before.  Change the link href to boxes2.html and the link should look like a default link (blue) as you have not visited it.

Most people expect links to behave in certain ways so you may never bother to style them in any way but you may come across uses for this later.