Visit Original Non-AMP Page
Remove Underline from Link CSS - HTML Links [Updated]
Let's get to the Main topic "Remove Underline from Links". We will learn how we can Remove Underlines by using Inline CSS, External CSS, and Internal CSS (ALL the Available Methods available inside HTML Web Page).
Let's Start with In Line CSS.
<a href="index.html" style="text-decoration: none"> Click Me </a>
This in-Line CSS Method is best Because if there is another CSS file that is Overwriting Styles Properties can be Prevented Here.
Because In Line CSS is really hard to Overwrite.
Watch Video Tutorial:
css-remove-underline-from-a-link
text-decoration: none not working?
Why don't you try to ADD the "!important" rule at the End (This will tell the browser to add this Important CSS Property).
Like This:
<a href="index.html" style="text-decoration: none !importent"> Click Me </a>
a{
text-decoration: none !important;
}<html>
<head>
<style>
a{
text-decoration: none !important;
}
</style>
</head>
<body>
<a href="index.html">Click Me</a>
</body>
</html>Having any Confusions Regarding the Given CODE?
If you are having some issues with understanding the Given code then please scroll down and please read the code Explanations.
CSS Property To Remove Underline From Links:
"text-decoration: none" CSS property we use to Remove Underlines from the Link. Where by Default we get Blue Color and Underlined text as text Styling / Text Decorations for Links in HTML.
using text-decoration: none CSS property to Remove Underline from Links
a{
text-decoration: none;
}What are Inline-CSS, External-CSS, and Internal-CSS
Inline-CSS, External-CSS, and Internal-CSS all are WORKS the SAME.
Implementing them inside an HTML document is Little Different.
Using Inline-CSS
For using In-Line CSS, We need to use/write them inside the Starting tag of our Element.
For example, I want to remove the underline from my Link Tag.
Here I have to select the Starting tag of my Link Element (Which is <a>) and write CSS Property there.
<a href="index.html" style="text-decoration: none"> Click Me </a>
Using External CSS
Instead of writing CSS Properties inside Starting tag, we can link an Custom External CSS file.
Linking or Using External CSS is very Effective.
Because using External CSS we can select Multiple Elements by their Tag Name, Class Name, or ID and add Styles to them.
External CSS File (filename mystyle.css)
a{
text-decoration: none;
}HTML File (where we have to link our External CSS)
<html>
<head>
<link rel="stylesheet" href="mystyle.css"/>
</head>
<body>
<a>Click Me</a>
</body>
</html>Using Internal CSS
Internal CSS Same as External CSS, But instead of linking a CSS file from an external Source/Path. We can write CSS inside <style> Tags and i will work Exactly like an External CSS but Internally from the HTML Page.
<html>
<head>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a>Click Me</a>
</body>
</html>FAQ About: CSS Remove Underline from Link
How to remove underline from link CSS
To remove the underline from the link using CSS, we have to use CSS "text-decoration: none" properties.
Where this CSS "text-decoration: none" property will remove all the Text Decorations from the Selected Element.
Like shown below:
a{
text-decoration: none;
}How to remove underline from link in HTML without CSS
To remove the underline from a link in HTML without CSS we can use JavaScript instead of CSS.
So in JavaScript we have to Select the Element by using "document.getElementsByTagName("a")[0]".
This will select the first Anchor or <a> tags.
Then we can remove the text decorations using style.textDecoration = "none"
<html>
<body>
<a href="index.html"> Click Me </a>
<script>
document.getElementsByTagName("a")[0].style.textDecoration = "none";
</script>
</body>
</html>Remove underline from link CSS hover
To remove the underline from the link CSS hover, we have to use CSS ":hover" Selector.
Where we will add the "text-decoration: none" Property (to remove the underline from a link on mouse hover).
a:hover{
text-decoration: none;
}CSS hide underline link
It's better to Remove Underlines from Links.
Still, if you just want to hide it (not remove just hide) Then you can use the CSS "text-decoration-color" property.
Where we will add light or Transparent Color to it so it can be hidden or totally blends with the background.
We will use RGBA (Red, Green, Blue, and Alfa)
Where for ALFA
0 means 0% Visible 100% Hidden
0.5 Means 50% Visible 50% Hidden
1 means 100% Visible 0% Hidden
a{
text-decoration-color: rgba(0,0,0,0);
}CSS link underline none / a underline remove
Sorry, there are no properties like "CSS link underline none" and "an underline remove".
Did you mean "text-decoration: none"?
This "text-decoration: none" property will set the link underline to none. So if you want to Remove the Underlines from your Links then you can use this CSS property.
Remove underline from link CSS Bootstrap
If you are using Bootstrap, then you must be familiar with BootStrap Classes.
To remove underlines from links we have "text-decoration-none
" class of Bootstrap.
You just need to add this class to your Link and Bootstrap will remove the Underline from that Link.
<a href="index.html" class="text-decoration-none"> Click Me </a>
How to remove blue underline from link CSS
When we add Hyperlinks using Anchor tags, HTML Anchor Tag will add blue color by default. If you want to remove the Blue color and use different colors there then you simply need to use CSS color: black; Property.
Where you can use different color like,
color: red;
color: green;
Color: pink;
so on.
<a href="index.html" style="color: black"> Click Me </a>
a{
color: black;
}Remove underline from link React
If you want to remove underlines from a link in React.js then you can use inline CSS for that.
Where you will add "text-decoration" to your Link / <a> tag in order to remove all text decorations like UNDERLINES.
*Important: In react we have <Link> and <a> both HTML Tags for adding Links. So make sure to add this CSS property to the correct one.
<a href="/home" style={{textDecoration: none}}> Click Me </a>Delete underline from span style
If you have underline under your SPAN tag's text, then you can simply select your SPAN tag using CSS and by using text-decoration: none; property you can remove it easily.
<span style="textDecoration: none"> Click Me </span>
If this is not working, then please add CSS to Anchor tag that you have declared inside SPAN tags.
Best Exercises for Removing Underlines and Changing Link Color
For practice/Example if you want to Remove Underlines from a LINK also want to change text color, then you need to use two CSS Properties.
1. text-decoration: none;
This will remove Underlines from your Links/Anchor texts.
2. color: black;
This will Change Default Blue Link/Anchor color to Black.
<html>
<head>
<style>
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a>Click Me</a>
</body>
</html>Unable to Remove Underline from a LINK in HTML
If you are unable to Remove underlines from a LINK in HTML then you need to check for follow these step.
Step 1: Are your Selecting the Correct Tag?
Sometime we select and try to add CSS (text-decoration:none;) to wrong HTML Tag. So in reality CSS is working but you are not able to see the results because you are selecting a wrong HTML tag.
So make sure you are targeting the correct anchor tag:
for example
anchor{
text-decoration: none;
}This code is wrong because anchor is not a valid tag.
Please Use:
a{
text-decoration: none;
}if you are using inlineCSS then make sure that you are adding style="" attribute inside the starting tags also make sure that there is no space between "text-decoration" property name
Like:
<a href="my.html" style="text-decoration: none;">My Link</a>
Still not working?
You have tried all the possible ways and its still not working? This means other CSS is overwriting our changes.
To fix it we need to use "!impotent" after CSS property value so this will prevent other CSS from overwriting it and hopefully this will fix our issue.
<a href="my.html" style="text-decoration: none;">My Link</a>
a{
text-decoration: none !impotent;
}