How to Change Link Colors with CSS

You can style links differently with CSS properties. In general, the properties used to style links are color, font-family and background-color.

There are three ways of changing the link color: inline, internal and external.

Inline method

Add the <span class="attribute">style</span> attribute directly to the hyperlink code and specify the <kbd class="highlighted">color</kbd> property through the <span class="attribute">style</span> attribute, then give a color value to it.

Example of changing a link color with the inline method:

Inline method example of giving a color to a hyperlink | CSS Snippets | W3Docs

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

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5">Visit our website.

</div>## Internal method

Internal method requires you to use the <style> tag within the <head> section of your HTML document. In the <style> tag, we set the color of our link.

Example of changing the link color with the internal method:

Internal method example of changing the link color | CSS Snippets | W3Docs

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

Try it Yourself »

There are 4 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 a user mouses over it,
a:active - the moment a link is clicked.

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

a:hover MUST come after a:link and a:visited,
a:active MUST come after a:hover.

Example of using different link states:

Example of different styles for different link states | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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>

Try it Yourself »

How to change the colors of the hyperlink underline and anchor text

To change the underline color, first of all, you need to remove it by setting the text-decoration property to none, then add the border-bottom property with the width (in this case, used as a hyperlink underline width) and border-style (solid, dotted, or dashed) properties. For the anchor text color, use the <span class="property">color</span> property.

Example of changing a hyperlink underline and anchor text color:

Example of Changing Hyperlink Underline Color | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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>

Try it Yourself »

Example of styling links with the mentioned methods:

Mouse over the links and watch how they will be changed | Example | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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>
      <a class="one" href="#">This link changes color</a>
    </p>
    <p>
      <a class="two" href="#">This link changes font-size</a>
    </p>
    <p>
      <a class="three" href="#">This link changes background-color</a>
    </p>
    <p>
      <a class="four" href="#">This link changes font-family</a>
    </p>
    <p>
      <a class="five" href="#">This link changes text-decoration</a>
    </p>
  </body>
</html>

Try it Yourself »

Now, we'll demonstrate another example, where we use the color property with its "inherit" value. This will make the element take the color of its parent.

Example of changing the link color with the "inherit" value of the color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        color: green;
      }
      .parent a {
        color: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <div class="parent">
      <a href="https://www.w3docs.com/">W3docs.com</a>
    </div>
    <p>Visit our <a href="https://www.w3docs.com/">W3docs.com</a> website.</p>
  </body>
</html>

Try it Yourself »

Example of styling links with the CSS text-decoration-color property:

The text-decoration-color property allows you to change the color of the underline (or other decorations) without affecting the link text color.

Example of styling links with the CSS text-decoration-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        text-decoration-color: grey;
      }
      a:link {
        color: #777777;
      }
      a:hover {
        color: #2d8653;
      }
    </style>
  </head>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/">website</a>.</p>
  </body>
</html>

Try it Yourself »

External method

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

With the external method, you’ll link your web pages to an external .css file that can be created by any text editor in your device. This is a more efficient method, especially when you need to style a large website. You can change your whole site at once by editing one .css file.

Example of using the external method:

External method example of changing link color | CSS Snippets | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Visit our <a href="https://www.w3docs.com/">website</a>.</p>
  </body>
</html>

Try it Yourself »

In your styles.css file, you would define the link styles:

a {
  color: #8ebf42;
}

Learn more about CSS links.