How to Change Link Colors with CSS

You can style links in different ways using CSS properties. Commonly used properties for styling links are color, font-family and background-color.

There are 2 ways of changing the color of a link: inline and external.

Inline Method

Add the style attribute directly into the hyperlink code and insert the color property into the style attribute, then give a color value to it.

Example of changing a link color with the inline method:

<!DOCTYPE html>
<html>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/" style="color: #8ebf42">website</a>.</p>
  </body>
</html>

External Method

Using external stylesheets you can take control of all the hyperlinks on your website. With external stylesheets, many attractive hyperlink effects can be done to develop the look of your website.

Example of changing a link color with the external method:

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/">website</a>.</p>
  </body>
</html>

Moreover, there are four link states that links can be styled depending on what state they are in:

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

While setting the style for several link states, follow these order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Example of link states:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* unvisited link */
      a:link {
      color: #ccc;
      }
      /* visited link */
      a:visited {
      color: #095484;
      }
      /* mouse over link */
      a:hover {
      color: #8ebf42;
      }
      /* selected link */
      a:active {
      color: #800000;
      }
    </style>
  </head>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/">website</a>.</p>
  </body>
</html>

How to Change Hyperlink Underline Color and Change Anchor Text Color

To change the underline color you first need to remove it with the text-decoration property and set the value none, then add the border-bottom property with width (in this case used as the hyperlink underline width), border-style (solid, dotted, or dashed) and for the anchor text color use the color property (to define the color code).

Example of changing the hyperlink underline and anchor text colors:

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
      text-decoration: none;
      }
      a:link {
      color: #000;
      border-bottom: 1px solid #ff0000;
      }
      a:visited {
      color: #e600e6;
      border-bottom: 1px solid #b3b3b3;
      }
      a:hover {
      color: #2d8653;
      border-bottom: 1px solid #000099;
      }
    </style>
  </head>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/">website</a>.</p>
  </body>
</html>

Example of styling links with all mentioned ways:

<!DOCTYPE html>
<html>
  <head>
    <style>
      a.one:link { 
      color: #ccc;
      }
      a.one:visited { 
      color: #095484;
      }
      a.one:hover { 
      color: #8ebf42;
      }
      a.two:link {
      color: #ccc;
      }
      a.two:visited {
      color: #095484;
      }
      a.two:hover {
      font-size: 150%;
      }
      a.three:link {
      color: #ccc;
      }
      a.three:visited {
      color: #095484;
      }
      a.three:hover {
      background: #8ebf42;
      }
      a.four:link {
      color: #ccc;
      }
      a.four:visited {
      color: #095484;
      }
      a.four:hover {
      font-family: monospace;
      }
      a.five:link {
      color: #095484;
      text-decoration: none;
      }
      a.five:visited {
      color: #095484; text-decoration: none; 
      }
      a.five:hover {
      text-decoration: overline underline; 
      }
    </style>
  </head>
  <body>
    <p>Mouse over the links and watch how they will be changed:</p>
    <p><b><a class="one" href="#">This link changes color</a></b></p>
    <p><b><a class="two" href="#">This link changes font-size</a></b></p>
    <p><b><a class="three" href="#">This link changes background-color</a></b></p>
    <p><b><a class="four" href="#">This link changes font-family</a></b></p>
    <p><b><a class="five" href="#">This link changes text-decoration</a></b></p>
  </body>
</html>

Learn more about CSS links.


Do you find this helpful?

Related articles