Styling Links
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mouses over ita:active - a link the moment it is clicked
/* 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;
}
Try it Yourself
When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
a:link {
text-decoration
: none;
}
a:visited {
text-decoration
: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Try it Yourself
Background Color
The background-color property can be used to specify a background color for links:
a:link {
background-color
: yellow;
}
a:visited {
background-color
: cyan;
}
a:hover {
background-color
: lightgreen;
}
a:active {
background-color
: hotpink;
}
Try it Yourself
Advanced - Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
a:link, a:visited {
background-color
: #f44336;
color: white;
padding
: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color
: red;
}
Try it Yourself
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Advanced - Create a link button with borders
Another example of how to create link boxes/buttons.