CSS Styling Links
HTML links can be styled with many CSS properties, like color , text-decoration , background-color , font-size , font-weight , font-family , etc.).
Example
Formatted code
a {
color: hotpink;
background-color: yellow;
font-weight: bold;
}Live preview
Styling Links Depending on State
In addition, links can be styled differently depending on what state they are in.
The four link states are
- :link - a normal, unvisited link
- :visited - a link the user has visited
- :hover - a link when the user mouses over it
- :active - a link the moment it is clicked
When setting the style for link states, there are some order rules:
- :hover must come after :link and :visited
- :active must come after :hover
Example
Formatted code
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}Live preview
CSS Links - Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
Formatted code
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}Live preview
CSS Links - Background Color
The background-color property can be used to specify a background color for links:
Example
Formatted code
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}Live preview