Styling Links with Pseudo-classes
The most commonly used pseudo-classes when styling links are:
We will also look at the
:target pseudo-class. Although it is not used to style links, links determine what
Note that our demo does not include the
:link pseudo-class. This is because you can use a simple
a rule instead of
a:link. If you do include both an
a rule and an
a:link rule the
a:link rule will take precedence because it has a higher specificity.
First, let's look at how most browsers style links by default:
- Links are underlined.
- Links that have not been visited are blue.
- Links that have been visited are purple.
- Hovering over/clicking on a link makes the mouse a pointer.
- Active links (links being clicked on) are red.
Changing Link Styles
Be careful not to change link styles in a way that disguises the fact that they are links.
The demo below includes examples for how to style links.