How to Change Link Color in CSS

Use the color property on anchor tags when links need to match your brand, improve contrast, or stand out inside cards, navigation, and content sections. This is the most direct way to style normal, hover, and visited link states.

What you’ll build or solve

You’ll learn how to change link color in CSS for default, hover, and visited states. You’ll also know how to keep links readable and clearly interactive.

When this approach works best

This approach is the right choice when the default browser blue does not match the page design or accessibility needs.

Common real-world scenarios include:

• Navigation menus
• Footer links
• CTA links in content
• Pricing page text links
• Blog article inline links

This is a bad idea when the new color makes links look like plain text and users lose the visual click cue.

Prerequisites

You only need:

• A basic HTML link
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Apply color to the anchor tag

Start by changing the default link color.

<a href="/pricing" class="cta-link">USA pricing</a>

<style>
  .cta-link {
    color: #0057ff;
  }
</style>

Then add hover and visited states for better interaction feedback.

<style>
  .cta-link:hover {
    color: #003bb3;
  }

  .cta-link:visited {
    color: #6a0dad;
  }
</style>

What to look for:

• color changes the link text color
• :hover improves interaction feedback
• :visited helps users track visited pages
• Keep contrast high against the background
• Preserve underline or another clear interaction cue

Examples you can copy

Navigation link

<a href="/docs" class="nav-link">UK docs</a>

<style>
  .nav-link {
    color: #111;
  }
</style>

CTA link

<a href="/signup" class="cta-link">Start in USA</a>

<style>
  .cta-link {
    color: #0070f3;
  }

  .cta-link:hover {
    color: #0055b8;
  }
</style>

Footer link

<a href="/privacy" class="footer-link">France privacy</a>

<style>
  .footer-link {
    color: #666;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Styling the wrong selector

What the reader might do:

.button {
  color: blue;
}

Why it breaks: the anchor tag may not use that class, so the link stays unchanged.

Corrected approach:

a {
  color: blue;
}

Or target the correct link class.

Mistake 2: Hover color too similar to default

What the reader might do:

a {
  color: #0057ff;
}

a:hover {
  color: #0058ff;
}

Why it breaks: users barely notice the hover interaction.

Corrected approach:

a:hover {
  color: #003bb3;
}

Mistake 3: Removing all interaction cues

What the reader might do:

a {
  color: black;
  text-decoration: none;
}

Why it breaks: links can look like plain text.

Corrected approach:

a {
  color: black;
  text-decoration: underline;
}

Or use another clear hover treatment.

Troubleshooting

If the color does not change, confirm the selector targets the exact <a> element.

If visited links still stay blue, add a :visited rule.

If hover feels weak, increase the contrast difference.

If links blend into text, restore underlines or add a stronger hover effect.

Quick recap

• Use color to change link text color
• Add :hover for interaction feedback
• Add :visited for browsing clarity
• Keep contrast strong
• Preserve a clear click cue like underline