How to change a link's color and remove the underline
Short answer
color sets the color, text-decoration: none removes the underline:
<a href="#" style="color: seagreen; text-decoration: none;">A link without an underline</a>An underline on hover
This way the user still sees it is a link:
<style>
.link { color: rebeccapurple; text-decoration: none; }
.link:hover { text-decoration: underline; }
</style>
<a class="link" href="#">Hover over me</a>A neater underline
Instead of removing the underline, make it thinner and move it away from the text:
<style>
a { color: steelblue; text-decoration-thickness: 1px; text-underline-offset: 4px; }
</style>
<p>Read the <a href="#">delivery terms</a> before ordering.</p>Common mistake
A link inside text loses its underline and gets a color close to the text color. Then it is hard to spot, and people with color vision deficiency cannot see it at all. Remove the underline only in menus and buttons, where it is clear anyway that the element is clickable:
<p>Read the <a href="#" style="color: #333; text-decoration: none;">delivery terms</a> before ordering.</p>Functions used in this recipe
- <a> — A link to another page, a file or a place on the page.
- color — The color of the text (and the default color of borders and SVG icons).
- text-decoration — Lines on text: underline, strikethrough, overline.
- :hover — Matches an element while the mouse pointer is over it.