How To Remove Underline From Links HTML

How To Remove Underline From Links HTML

by

How To Remove Underline From Links HTML

Are you tired of the default underlined appearance of hyperlinks in your HTML documents? Hyperlinks play a crucial role in web navigation, but sometimes the standard underlining doesn’t quite fit your website’s design. The good news is that you can easily change this and create a more customized look for your links.

In this post, we’ll explore various methods to remove the underlines from HTML links. You might want to do this to match your website’s aesthetics or to create a unique user experience. By the end of this guide, you’ll be equipped with the knowledge to not only remove underlines but also modify other link styles, such as changing the color, adding hover effects, and more.

Whether you’re a web developer looking to enhance the visual appeal of your site or a beginner eager to learn HTML link styling, you’re in the right place. Let’s embark on this journey to make your hyperlinks stand out and integrate seamlessly with your web design.

How To Remove Underline From Links HTML

How To Remove Underline From Links HTML using Inline CSS

We use style attribute with the CSS property text-decoration to remove underline from a specified link in HTML.

Syntax : 

<a href="#" style="text-decoration: none" >HTML tutorial</a>

Example :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a style="text-decoration: none" href="https://www.youtube.com/channel/UCEiRaukO0mMArmQ4D5WoEjw">HTML tutorial</a>
</body>
</html>

How To Remove Underline From Links HTML using Internal CSS

Syntax :

.link0{
text-decoration: none;
}

Example :

In this example will see how to remove underline from links in html using Internal CSS.

<!DOCTYPE html>
<html>
<head>
<style>
/* Internal CSS */
  .link0
  {
    text-decoration: none;
  }
</style>
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a class="link0" href="https://www.youtube.com/channel/UCEiRaukO0mMArmQ4D5WoEjw">HTML tutorial</a>
</body>
</html>

How To Remove Underline From Links HTML using External CSS

Syntax :

.link0{
text-decoration: none;
}

Example :

style.css
.link0{
text-decoration: none;
}

index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> 
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a class="link0" href="https://www.youtube.com/channel/UCEiRaukO0mMArmQ4D5WoEjw">HTML tutorial</a>
</body>
</html>

Output

Styling Hyper-Links :

The following snippet illustrates a hyper-links with CSS Effects.

See the Pen Untitled by Rahul Vijayanagaram (@RahulVijayam-the-flexboxer) on CodePen.

If you have any questions or suggestions, please feel free to leave a comment below.

Also, Check https://rahulvijayam.com/category/scripts/

Related Posts: