Learning Code

Different Link States

You have probably noticed that links often have different styles attached to different states. When you hover over a link it will look different. Links that you have visited often look different. Sometimes a link will look different as you are pressing it. The different link states are:

Link (a:link ) - the default link

More +Less —

Visited (a:visited) - the link after it has been visited
Active (a:active) - the link as it is being pressed
Hover (a:hover) - the link as the cursor hovers over it (specifically for non-touch devices)
Focus (a:focus) - the link when it is in focus (like hover but specifically for touch devices)

Keep in mind that the order you list these states is important. If hover is placed below visited, a visited link may not hover in the way you planned.

Typical Link Styles

At minimum, most developers will choose to get rid of the underline and change the font color for the different link states. Often they might also change the font-family and the font-weight. Most often, each state is identical except with a different text color and/or background color:

a:link {text-decoration: none; color: cadetblue; font-weight:bold;}

More +Less —

Since the general link styles were set above, only the color needs to be changed for the other states:

a:visited {color: #0093ff;} (some designers prefer having the visited state identical to the link state)
a:active {color: white;}
a:hover,a:focus {color: navy;} (hover and focus should have the same exact style)

However you choose to style your links, make sure that they look different from the rest of your text. Font-weight, color, and the font-family should all work together to create a distinct style. Your links should coordinate and compliment the rest of your design, while still looking unique.