• Register
190 points
5

If you want to become a web developer and you are new in html, css then in this tutorial we are going to discuss how we can remove underline from hyperlink in html.

This problem we have to face when making a header menu page so here we need some basic knowledge about html and css.

So, This tutorial is divided into various steps, you need to follow each step one by one then you can remove the underline from the hyperlink.

Step1: In the first step we will create a simple html code, In this code we will make a header menu with hyperlink. So we need to use the anchor tag <a>. It allows us to create a hyperlink or menu in html. 

Syntax:

<a href="">Home</a>

<a href="">Services</a>

<a href="">About Us/a>

Step2: Now, here we are going to create a menu in the header bar, we will use the navbar tag. The navbar tag to create navbar in html and the menu list will be create in it.

<nav>

<a href="">Home</a>

<a href="">Services</a>

<a href="">About Us/a>

</nav>

Step3: Now,it's time to use css for this code and make some required changes. We will use internal css but you can use others. It's your choice.

<style>

.link{

text-decoration-line: none;

padding: 20px;

}

</style>

You can see above css code must be in the opening and closing style tag and it can be placed before the </head> tag.

So, after using this text-decoration property we can remove underline from hyperlink.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink</title>

<style>

.link{

text-decoration-line: none;

padding: 20px;

}

</style>

</head>

<body>

<header>

<nav>

<a class="link" href="">Home</a>

<a class="link" href="">Services</a>

<a class="link" href="">About Us</a>

</nav>

</header>

</body>

</html>

Output:

Home  Services  About Us