Remove underline from link css

A comprehensive guide to removing and customizing the appearance of hyper text links using CSS.

Introduction

Like most paintings are framed to enhance their appearance, and for decoration purposes, the textual links are colored as well as underlined to provide perceptual attention. By default, the HTML/CSS standards designate the underlining of clickable hyperlinks. This improves click-ability and interactivity with the web pages and serves all kinds of purposes. These web services include e-commerce websites, search engine display sites, communication channels, encyclopedias, news portals, video libraries, index pages, and so on.
Furthermore, if you are a front end web designer who does not like the glance of your custom website due to non-uniformity in texts, or simply you are someone who is trying to remove the irregularities caused by underlined hyperlinks, then this article will exactly enlighten upon the solutions for you.

What is a link in CSS?

A link or hyperlink is an entity that provides a connection among web pages or a section within the same web page. In HTML, tag specifies a hyperlink where the “href” attribute indicates the destination site. Further, regardless of the state of the link, the HTML standard has set the textual hyperlink to stay underlined. Here, the links can have only one out of four states (unvisited, visited, hover, or an active link state) at a time in all known browsers. However, this standard limitation can be addressed with the help of various CSS styling codes.
Therefore, hyperlinks are styled using CSS property. Further, the different states of a link can be styled by forming pseudo classes. The selection of an element and pseudo classes will be explained in the next sections.

How to Select the link element in CSS?

As we know, we can either perform a universal selection of elements or define individual styling properties for each class. The table below illustrates the four states of a link:

Link State	Decoration value	Default Color	Pseudo class Selector
Unvisited link	underlined	blue	a:link
Visited link	underlined	purple	a:visited
Active link	underlined	red	a:active
Hover link	underlined	blue	a:hover

Table 1: Link states default values

In addition, to learn in detail about the process of selecting all the elements (instead of applying the custom styles to every individual class or id), check this article What is a universal selector in CSS? Implementing this will affect all the pseudo-classes with described CSS properties by overriding the default decoration among every other selector.

Also, the below list contains the most useful CSS properties for customizing links and are assigned the example values:

Color : Crimson;
Font-family : Calibri;
Text-decoration : none;
Background-color : Cyan;

Therefore, to remove underline from a link in CSS, we need to set property value of “Text-decoration” to “none”, as illustrated below.

a {
  text-decoration: none;
}
Code language: CSS (css)

Moreover, we can quickly fix this issue using “inline CSS” with a similar approach as I have earlier shown. As has been noted, the only caveat here is that this practice only makes the selected link to have no underline.

<a Href="_blank" style="text-decoration:none"> Test link sentence with inline CSS </a>Code language: HTML, XML (xml)

In a similar fashion, we can also override the text-decoration value in internal CSS style tag, as identically shown right below.

<head>
  <style>
    a { 
        text-decoration: none; 
      }
  </style>
</head>Code language: HTML, XML (xml)

How to customize the link appearance in CSS

In brief, a plurality of customization options in CSS and other styles are available to change hyperlinks. The CSS properties can be used to set background color, font-family, and text size. These properties are illustrated with an example HTML/CSS code snippet below.

/* HTML code snippet */
<!doctype HTML>
<html>
	<head>
		<title> codedamn HTML Playground</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="/style.css" />
	</head>
	<body>
		<p> This is <a href = "#"> Visited </a> link </p>
                <p> This is <a href = "#"> Unvisited </a> link </p>
        
	</body>
</html>

/* CSS code snippet */

a {
  text-decoration: none;
}

a:visited {
  color: #00AA00;
}
a:link {
  color: #0000CC;
 
 }
/* Non-clicked state of link appears blue 
according to the assigned color code value
as we have seen in the Figure 1. Further, */

a:hover {
  color: #AA0000;
} 
/* As soon as, the mouse cursor is hovered over
a link, the cursor changes itself to an index 
finger pointer (hand icon) whereas the link 
actively transitions to red color.
*/
 
a:active {
  color: #CC0000;
} /* active state of link */
Code language: HTML, XML (xml)

pic of link decoration — Figure 1: Output of CSS script demonstrating decoration without underlined link

Conclusion

Summing up, the customization of links to appear in the right way is much desired in order to prevent some unnecessary confusion for people trying to access our websites. Poorly designed web links ruin the user experience, which can be fixed by controlling the default values using CSS. We utilized the text-decoration property of CSS by selecting <a> tag and setting its value to none. Also, you can try out the code functionality using Codedamn playground, which provides a work environment in-browser. Happy learning.

Introduction

What is a link in CSS?

How to Select the link element in CSS?

How to customize the link appearance in CSS

Conclusion

No comments so far