a:hover {

color: blue;

}

You will notice that we have added on a state modifier with the ‘:hover’. This code now means that whenever we hover over the link, the text will turn blue. There are four states in total that we can watch out for. They are:

• a:link. This is a standard, unvisited link.
• a:visited. This state will target links that have already been visited by the user.
• a:hover. This state will target links that are currently being hovered over by the user’s mouse.
• a:active. This state is for when a user clicks on the link, that exact moment is the active state and lasts for a very short period

By using these states we are able to enhance our websites and convey extra meaning to our users about the links on our website.

What we have learned in this chapter

Now that we have covered the essentials of CSS and a number of crucial concepts, Chapter 5 will build upon this knowledge as we look at colour, borders, margins, padding, floats and more about the box model.