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;
}
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;
}
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.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
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
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
