Links are marked up using the
And links in their basic state can be styled by selecting for the element normally:
The visited state refers to links the user has previously clicked. It can be styled by selecting the state like this:
The hover state refers to links with the user's mouse positioned over it, but not clicking. It can be styled by selecting the state like this:
The focus state refers to links the user selects by navigating with the tab key. This state is important for users who are unable to use a mouse or touch input. It can be styled by selecting the state like this:
The active state refers to a link in the moment a user clicks on it. It can be styled by selecting the state like this:
Order of Selectors
Because styles of one link state can sometimes override the styles of another link state, it's important to always write the styles for the link states in the correct order to ensure there are no conflicts. The best link order is default, visited, hover, focus, then active. You can remember this order using a handy mnemonic device: "Very Hungry Feline Acrobats". (Note that this is the same order used in the following example.)
In the above example, try hovering over the link. Try selecting it with the tab key. Try clicking on it. See what happens? Try adding your own CSS to the various link states.
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.