All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

CSS Link Underline Remove

Last Updated : Mar 11, 2024

CSS Link Underline Remove

In this tutorial we will show you the solution of CSS link underline remove, in some websites we see that there are some links in paragraph, div tags, etc. and they are not underline.

A link is shown by its color and background color in those websites, which seems to be very attractive.

So, today we are here to understand that how we can do this means how to remove underline from links using CSS.

Step By Step Guide On CSS Link Underline Remove :-

Now, to remove underline from links using CSS. There is only a single line of code which is used.

Let us see the example below that how to use this code.

<!DOCTYPE html>
<html>
<head>
   <title> CSS tutorials </title>
 <style>
  a{
   text-decoration: none;
  }
 </style>
</head>
<body style=”text-align: center;”>
<h1>
 Talker’s code – CSS tutorials
</h1>
<h2>
 CSS link underline remove
</h2>
<a class=”linkOne” href="#" >
 This is first link
</a>
<br>
<a class=”linkTwo” >
 This is second link
</a>
<br>
<a class=”linkThree” href="#" >
 This is Third link
</a>
</body>
</html>
  1. As, here we see that we that in above example we show you an example in which html and CSS codes are used.
  2. Let us understand the above codes step by step.
  3. Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
  4. After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
  5. Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paried tag.
  6. Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag
  7. As, the CSS property which is used to remove underlines from links is text-decoration. Its value must be given to none. So, that the decoration which is applied to anchor tags gets removed.
  8. In above example, we see that we directly use anchor tag and remove the underlines. Here, we can also give id’s of say classes to remove underline from only specific links. There are also many other ways which are also helpful to remove underlines from links. We will discuss them in next session.

Conclusion :-

At last, in conclusion here we can say that with the help of this article we are able to understand about how to remove underline from link using CSS.

I hope this tutorial on CSS link underline remove helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪