How To Remove Underline From Link In CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to remove underline from link in CSS, you might wish to remove the default underline from a link while styling a website. Fortunately, CSS provides various options for removing the underline from a link.
In this tutorial, you'll learn how to use CSS to remove underlines from links. We will also show how to use the CSS property text-decoration to remove the underlining from a link in HTML.
Step By Step Guide On How To Remove Underline From Link In CSS :-
Text can be decorated with the text-decoration attribute. The removal of underlines may be precisely what you're looking for in terms of appearance, but you should proceed with caution.
We'll go through how to use the text-decoration property to completely remove the underlining from links on your HTML site in the sections below.
Here is an example of How to remove the underline from the link in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.div a {
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="div">
<span class="Page">This Page</span>
<a href="#"><span class="DifferentPage">Next Page</span></a>
</div>
</body>
</html>
- First, we type <! DOCTYPE html>, which tells the web browser what version of HTML the file is written in.
- The <html> element, on the other hand, is used to identify the start of an HTML document.
- The <head> tag now contains information about web pages. A <title> element is utilised in this tag to let us provide a web page title. Paired tags include the <head> and <title> tags. As a result, both have the </head> and </title> finishing tags.
- Finally, the <body> element is used to define the content of the webpage. This is where you'll write all of the website's content. Inside the div, we've generated a span with the class Page and a div with the container class. ThisPage has been placed in the space between the span tags. We've added an anchor tag to the next line.
- Then, we changed the href attribute to # inside the anchor tag and created a new span with the class DifferentPage. The text NextPage has been set between the spans.
- A <style> tag was used in the head tag. We've chosen the anchor tag, which is located within the .div container class and in the necessary CSS file. To make the text black, we used the hex code #000000. We have set the none value for the text-decoration attribute. The underlining and blue colour of the anchor tag's element will be erased if the text-decoration property is set to none.
- Finally, the </body> and </html> tags are used to close the <body> and <html> tags, respectively.
Conclusion :-
One of the most typical requests from new front-end coders is how to remove the underline in links. This tutorial showed how to remove the underline from the link in CSS. Also, using the text-decoration attribute simplifies the process.
To pull it off, you only need a basic understanding of HTML and CSS. I hope this tutorial on how to remove underline from link in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
