How Do You Display Hyperlinks without an Underline?

The Anchor tag in HTML is used to create a hyperlink in a webpage, which can take the user to an external link or even other documents on the same web page.

There exists a default styling of elements in HTML. We can easily override all these default stylings; for the anchor tag, we have default styling as blue-colored text with an underline. In this article, we will discuss how we can remove the underline from the anchor tag.

Removing Underline from Hyperlink with Internal CSS

The underline of the hyperlink can be removed with internal CSS by using a style tag with the property text-decoration as none.

Syntax:

Output:

Removing Underline from Hyperlink with External CSS

CSS

HTML

Output: Explanation:

• In the external CSS, we have written a style for a particular id anchor-tag that is being used in the HTML Document.
• Here, we are using the id selector, but we can use other selectors as well, like the class selector and grouping selector.
• In the HTML document, we have created the association of the external stylesheet and HTML document with the link tag.
• Subsequently, we are using the same id for our anchor tag, and that is the reason the corresponding style is being applied to the anchor tag.

Using CSS Class to Remove Underline from Hyperlink

CSS

HTML

Output: Explanation:

• In this example, everything is similar to the last one; the only difference is here, we are using a class selector instead of an id selector.

Using Global CSS to Remove Underline from All Hyperlinks

Universal Selector: It selects all elements of the document and applies the corresponding styles.

Output: Explanation:

• We have selected all elements with the universal selector (*) and written the property text-decoration as none.
• Ideally, we should not use this approach because the styles are being applied to each and every element.

Make All Links Not Underlined

Grouping Selector: It is used to select all elements of the same group, and then it applies the styles to those elements.

Output: Explanation:

• The grouping selector a will select all anchor tags of the document, and it will provide the styles to all of them.
• In this way, we can remove the underline from all hyperlinks.

Make an Individual Link Not Have an Underline

Three approaches to achieve this are listed below,

• Id Selector: We can assign an id to the particular anchor tag, and then we can associate some styles to that id in the stylesheet.

• Class Selector: We can define a class with some styles, and then we can restrict ourselves from allocating that class to only one element. In this way, we can style an individual link.

• Inline Styling: This could be the best approach because inline styles have the highest priority. Also, it is simple to provide styles to any individual element with inline styling.