Remove Underline from link HTML

Hi there, in This tutorial we are going to remove underline from link by Using CSS in HTML. So follow along and we will also cover other related questions to this (Remove underline from link) Topic.

Youtube: Remove Underline from link HTML
Play Youtube Video

Using CSS – remove underline from link in HTML

using CSS text-decoration:none; property we can easily remove underline from HTML links.
So we have to write add this text-decoration:none; to our Anchor/Link tag as shown below.

Using Inline CSS

all add or use text-decoration:none; CSS property we need write style=”” attribute to our Anchor/link starting tag.
Then we can use text-decoration:none; property inside style=”” attrubute like this
style=”text-decoration:none;”

index.html

<a href="#" style="text-decoration:none">Click Me</a>

Full HTML CODE for inline CSS

index.html

<html>
  <head>
    <title>Remove Underline from Links</title>  
  </head>
<body>
  <a href="#" style="text-decoration:none">Click Me</a>  
</body>
</html>
Remove Underline from link HTML
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

Using External or Internal CSS

If you are using external CSS or internal CSS then use this text-decoration:none; we need to select the link/anchor tag first.
We can select that using Tag ID or just by TAG NAME a{…}.
And we can use text-decoration:none; CSS like shown below.

index.css

a{
  text-decoration:none;  
}

Full HTML and CSS for Internal CSS

index.html

<html>
  <head>
    <title>Remove Underline from Links</title>  
		
    <style>
      a{
        text-decoration:none;  
      }
    </style>
		
  </head>
<body>
  <a href="#">Click Me</a>  	
</body>
</html>
Using External or Internal CSS

Remove the blue color with underline form HTML link

To remove the default blue color from link just use CSS color:black; property.
Where you can choose any color like green, yellow, pink, gray, lightgray and more.

Using Inline CSS

index.html

<html>
  <head>
    <title>Remove Underline from Links</title>  
  </head>
<body>
  <a href="#" style="text-decoration:none;color:black;">Click Me</a>   
</body>
</html>

Using internal CSS

index.html

<html>
  <head>
    <title>Remove Underline from Links</title>  
		
    <style>
      a{
        text-decoration:none;  
        color:black;  
      }
    </style>
		
  </head>
<body>
  <a href="#">Click Me</a>	
</body>
</html>
Using internal CSS

FAQ – About Remove underline from link CSS

How to remove the underline from a hyperlink in html

To remove the underline from a hyperlink in html, we can use External/Internal CSS or just by using Inline CSS we can remove the Underline from a link / Hyperlink in HTML.
If you have only few Hyperlinks inside your HTML Document the we recommend you to use Inline CSS.

remove the underline from a hyperlink in html using INLINE CSS

index.html

<a href="mypage.html" style="text-decoration:none">Click Me</a>

But if you have Multiple Hyperlinks inside your HTML Document then we recommend you to use External or Internal CSS.

index.html

<html>
  <head>
    <title>Remove Underline from Links</title>  
		
    <style>
      a{
        text-decoration:none;  
        color:black;  
      }
    </style>
		
  </head>
<body>
  <a href="#">Click 1</a> 
  <a href="#">Click 2</a> 
  <a href="#">Click 3</a>  	
</body>
</html>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

How to remove the underline from the link in HTML without CSS

you can use JQuery. But at the end you have to use $(“a”).css(); which will also use CSS but with jQuery.

index.html

$(document).ready(function() {  
    $("a").css({"text-decoration": "none"});  
});

text-decoration none not working

If your text-decoration:none; CSS is not working that make sure that haven’t misspelt anything.
And you can try these two methods (Inline and Internal CSS) to make sure everything is correct.
But I recommend InlineCSS because no other External CSS can OverWrite it.

index.html

<a href="#" style="text-decoration:none">Click Me</a>

HTML link without underline and color

To add a link without underline and color we can use color property along with text-decoration property.
Where in color property we have to give color like this (color:black;).
and in text-decoration we have to give none (text-decoration:none;) to remove underline from links.

index.html

<a href="#" style="text-decoration:none;color:black;">Click Me</a>

how to remove underline in CSS

in CSS (Internal or External CSS) we have to use the text-decoration property.
Where using text-decoration:none; we can remove the text decorations like Underline etc.

index.html

<a href="#" style="text-decoration:none;">Click Me</a>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

HTML underline css

If you want to ADD underline to a text using CSS, then you can add that underline using text-decoration:underline; property.
Which will add underline to selected HTML element/Text.

index.html

<a href="#" style="text-decoration: underline;">Click Me</a>

HTML link without underline and color

To add HTML link without underline and color we have to use color property along with text-decoration property.
Where text-decoration we have to give none (text-decoration:none;) to remove underline from links.
and color property we have to give color like this (color:black;).
Where you can choose any color like green, yellow, pink, gray, lightgray and more.

index.html

<a href="#" style="text-decoration: none; color: black;">Click Me</a>

HTML remove underline from link – remove underline from anchor tag

you can use inline or external CSS for that.
Where you need to select anchor tag using a{…} in external or Internal CSS and in inline CSS you just need to add style=”” attribute inside anchor tag’s starting tag.
By using text-decoration:none; you can remove underline from anchor tag.

index.html

<a href="#" style="text-decoration: none;">Click Me</a>

text-decoration none html

In HTML, text-decoration none (text-decoration:none;) removes all the Text element stylings like Underlines.
So if you want to remove Underlines from Links you can use this text-decoration:none; CSS property to get rid of that underline from the texts/links.

index.html

<a href="#" style="text-decoration: none;">Click Me</a>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

css remove underline from link / how to remove underline from hyperlink css

To remove Underlines from Links using CSS we have to use CSS text-decoration:none; property. This CSS property will set text Decoration to NONE (Which will remove the Underlines and Other Text Decoration from the Selected TAG).

index.html

a{
  text-decoration:none;  
}

How to remove underline from link in html

Its Simple, if you want to know how to remove underline from link in html, then just use CSS text-decoration:none; property.
Where this text-decoration:none; will remove link styles like Underline from links in HTML.
CODE:

index.html

<a href="https://google.com" style="text-decoration:none">
  Click Me
</a>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Just 10$/hSee Plans100% Free Trial + Money Back Guaranty
Logo