Link States
Links are interactive elements and can change their display based on the current state of their interaction with the user. It is important to write CSS for each state to visually indicate to users how they are interacting with the link.
Normal Links
Links are marked up using the <a> tag.
And links in their basic state can be styled by selecting for the element normally:
Visited
The visited state refers to links the user has previously clicked. It can be styled by selecting the state like this:
Hover
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:
Focus
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:
Active
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.)
Full 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.
Video Lesson
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.