how to get rid of link underline css code example

Example 1: remove underline from link css

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

Example 2: how to change hyperlink color in css

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

Example 3: css how to style a

/*a normal, unvisited link*/
a:link{
	color: green;
}
/*a link the user has visited*/
a:visited{
	color: purple;
}
/*a link when the user mouses over it*/
a:hover{
	color: yellow;
}
/*a link the moment it is clicked*/
a:active{
	color: brown;
}

Example 4: remove underline from link css

<!-- HTML code to remove underline 
	from anchor tag -->
<!DOCTYPE html>
<html>
   <head>
      <title>text-decoration property</title>

      <!-- text-decoration property to remove 
         underline from anchor tag -->
      <style>
         a:link {
            text-decoration: underline;
         }
         a:hover {
            text-decoration: none;
         }
      </style>
   </head>

   <body style="text-align: center">
      <a id="GFG" href="#"> Hello Programmers! </a>
   </body>
</html>

Example 5: how to get rid of underline for links in css

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Tags:

Html Example

Recent Posts