A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Working with link states .

Now everyone knows the default purple and blue colors of links world wide. You can always tell you haven’t clicked somewhere when the link is still blue. Well, it is also a good way to tell if someone actually put any effort into coding their website, because if they did, they should have changed those god-awful colors.

Instructions.

Earlier we changed the color of all anchors (Links) to bright orange, and took away the underline. Well lets say we want to give that link it's underline back when someone goes to click on it, or when they "hover". This is easy.

For all elements, but particularly links, there are four different states: link, visited, hover and active. Link and Visited are specific to links, but for standards compliant browsers, every element has and Active and a Hover state, except in Internet Explorer, which is not standards compliant. Defining characteristics for a specific state is easy. Simply add “:link”, “:visited”, “:hover” or “:active” to the end of the target name, and define away.

We want to give our link it’s underline back when a user hovers over it, so we will do so by targeting the element A again by adding “:hover” to it, giving us a new target of “a:hover”, we will then pull “text-decoration” and define it as “underline”.

a:hover {
text-decoration: underline;
}

Notice how we do not have to pull the “color” characteristic to make sure that it was still orange when hovered, this is because the "color" was "inherit[ed]" from the previous time we targeted it.

In an ideal world we would be able to target the ":hover" event of any element on the page, however, Internet Explorer does not work well with this, and thus it is impractical to do this outside of Links.