May 03, 2021 CSS
Different links can have different styles.
Linked styles can be used with any CSS property (e.g. color, font, background, etc.).
Special links can have different styles, depending on what state they are in.
The four link states are:
a:link
- Normal, unresoled links
a:visited
- a link that the user has visited
a:hover
- When the user mouses on the link
a:active
- the moment the link was clicked
When styled to several link states, there are also some sequential rules:
a:hover
must follow
a:link
and
a:visited
a:active
must follow
a:hover
Tip: In this site's CSS reference manual, we have a detailed description of the CSS:link selector.
Based on the example of the color change of the link above, see what state it is in.
Let's go to the link style in some other common way:
text-decoration
is primarily used to remove underscores from links:
The background color property specifies the linked background color:
Add hyperlinks with different styles
This example shows how to add additional styles to hyperlinks.
Advanced - Create a link box
This example demonstrates a more advanced example where we combine several CSS properties to appear as boxes.