To remove the blue underline from a link in HTML using CSS, you can modify the default behavior of anchor (<a>
) elements by setting the text-decoration
property to none
. By default, links are styled with an underline, and removing it can be done with this simple CSS rule.
Here’s an example:
Example of Removing Blue Underline from Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Blue Underline from Link</title>
<style>
/* Remove the blue underline from links */
a {
text-decoration: none;
color: inherit; /* Optional: removes the default blue color */
}
/* Optional: styling the link when hovered */
a:hover {
color: #ff6347; /* Change color on hover (for example, tomato) */
}
</style>
</head>
<body>
<a href="https://www.example.com">This is a link with no underline</a>
</body>
</html>
Explanation of the CSS:
text-decoration: none;
: This removes the underline that is applied by default to anchor (<a>
) elements.color: inherit;
: This ensures that the link adopts the color of its parent or surrounding elements (you can customize the color here if you like).- Optional
a:hover
: You can also define how the link behaves when hovered over (e.g., changing its color).
Conclusion:
By applying text-decoration: none;
to anchor tags, you can remove the blue underline. Additionally, you can customize the color and other styles as needed to suit your design.