Table of Contents
Introduction
When you create a hyperlink using an anchor tag in HTML, the style will create automatically look like a general link. The color will change into blue, the text will be underlined and the hyperlink or hyperlink becomes the cursor: pointer when the mouse touches it. By default, all of these styles are installed in the CSS libraries. In this article, I will tell you how to change this link without underline and color in HTML to your liking. Before that let me tell you how to create a hyperlink.
Create a hyperlink using the anchor tag in HTML
HTML is the perfect way to create a link, in which you can easily create a link using the anchor tag. We create a link to link the two web pages. The opening anchor tag is <a> and the closing anchor tag is </a>. If you create the anchor tag, use the “HREF” attribute mandatory, because you have to give the link of the webpage put in the “HREF” attribute.
Code:
<html>
<head>
<title>Create Hyperlink</title>
</head>
<body>
<a href=" Your URL"> Click Here</a>
</body>
</html>Output:
How to Create Link Without Underline and Color in HTML?
To remove the underline from a hyperlink in HTML, use the “text-decoration” property in CSS to give “none” as a value. To change the color of the hyperlink, use the “color” property in CSS to give “your preferred color” as a value. Similarly, to change the mouse cursor style to normal in a hyperlink, we need to use the “cursor” property in CSS to give the value “Auto”. But if you change all of these styles in a hyperlink, the user cannot identify the hyperlink. After applying this style, the hyperlink looks like normal text, see the output below
Code:
<html>
<head>
<title>Hyperlink without styles</title>
</head>
<body>
<a href=" Your URL" style=" text-decoration: none;
color: black; cursor: auto; "> Click Here</a>
</body>
</html>Output:
The best way to user can identify hyperlinks without underline
You can change the color of the hyperlink to something other than black and change the color when you touch the hyperlink or hypertext with the mouse. If you use this method, the user will definitely identify as a hyperlink.
Code:
<html>
<head>
<title>Hyperlink without styles</title>
<style type="text/css">
a{
color: red;
text-decoration: none;
}
a:hover {
color: blue;
}
</style>
</head>
<body>
<a href=" Your URL"> Click Here</a>
</body>
</html>Output:
Conclusion
Therefore, you should not change the default style of the hyperlink. Because it may be difficult for the user to identify the hyperlink. Do comment if you have any questions or suggestions on this topic.
