Overview
An HTML text link is displayed in a different color depending on whether it has been visited, is unvisited, is being hovered over, or is currently active.
By default, a link will have the following appearance (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Using CSS to Style Links
CSS can be used to customize the styling on links.
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: darkgreen;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
text-decoration: underline;
}Note
To ensure proper styling is applied as specified, the link styling should be done in the above order (link, visited, hover, active).
Using a Bottom Border
The text-decoration property (line under the link) can look a little odd because it gets broken up by low-hanging characters like g, j, p, q, and y. So you could disable the text-decoration and instead use the bottom-border property (which we do on 1SMARTchicken).
The following will only show the underline when hovered, and it will appear just below those low hanging characters.
a {
border-bottom: transparent solid thin;
}
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: darkgreen;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
border-bottom-color: green;
}
a:active {
color: orange;
text-decoration: none;
}Note
The above is not as user friendly because the initial state of the link is not underlined, which is what the user would typically expect for a link. So you may want to apply other styling to ensure that the link sufficiently stands out from the text surrounding it.
CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.