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.

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.

Practice Exercise