Style Link using CSS

With the help of CSS, we can convert the look and feel of a normal link into a link that looks interactive and elegant.

Note - Before starting this article, on styling link using CSS, a recommended article is a:link, a:visited, a:hover, a:active. If you already do understand about these four link selector pseudo-classes, then forget this article, and continue the tutorial on styling link.

How to Remove Underline from a Link in CSS

The underline from a link can be removed using following CSS code:

a{text-decoration: none;}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none;}
   </style>
</head>
<body>

   <a href="/index.html">jobails.com</a>
   
</body>
</html>

Output

jobails.com

Change Link Color using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{color: red;}
   </style>
</head>
<body>

   <a href="/index.html">jobails.com</a>
   
</body>
</html>

Output

jobails.com

Change Background and Text Color of a Link using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{background-color: purple; color: whitesmoke;}
   </style>
</head>
<body>

   <a href="/index.html">jobails.com</a>
   
</body>
</html>

Output

jobails.com

CSS Style Links in Multiple Ways

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none;}

      a.one:hover{color: red;}
      a.two:hover{font-size: xx-large;}
      a.three:link{font-size: x-large;}
      a.three:hover{color: purple;}
      a.four:link{font-size: x-large;}
      a.four:hover{color: green; font-family:'Courier New', Courier, monospace;}
      a.five:hover{text-decoration: underline; color: yellowgreen;}
   </style>
</head>
<body>

   <p>Hover <a href="/index.html" class="one">fresherearth</a> to see the change</p>
   <p>Hover <a href="/index.html" class="two">fresherearth</a> to see the change</p>
   <p>Hover <a href="/index.html" class="three">fresherearth</a> to see the change</p>
   <p>Hover <a href="/index.html" class="four">fresherearth</a> to see the change</p>
   <p>Hover <a href="/index.html" class="five">fresherearth</a> to see the change</p>
   
</body>
</html>

Output

Hover fresherearth to see the change

Style Link as Button using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none; background-color: maroon; color: white;
         padding: 12px; font-size: larger;}
      a:hover{background-color: green;}
   </style>
</head>
<body>

   <a href="/index.html">jobails.com</a>
   
</body>
</html>

Output

jobails.com

CSS Link Style Example

Let's create one last example of styling link using CSS, to complete this article:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a{text-decoration: none; color: green; border: 1px solid green;
         padding: 12px;}
      a:hover{background-color: green; color: white;}
   </style>
</head>
<body>

   <p><a href="#">Hover Me</a></p>
   
</body>
</html>

Output

Hover Me

Above examples are just demo, to show how a link can be styled using CSS. You can use multiple CSS properties to style the link based on your requirement.

CSS Online Test

« Previous Tutorial Next Tutorial »