How to Change Link Colors

If you find you don’t like the default link colors on a theme, it’s really simple to change them with just a few lines of code. If you’re using a Graph Paper Press theme, most of our themes allow you to change colors from the Theme Options. It’s important to think about the different properties of a link; what it looks like when it’s visited, unvisited and when you hover over it. Edit this code in your style.css file.

a:link {color:#CCCCCC;} /* unvisited link */
a:visited {color:#404040;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */

You can also add a text-decoration argument to add or remove an underline.

a:link {color:#CCCCCC; text-decoration:none;}
a:link {color:#CCCCCC; text-decoration:underline;}

To easily find the right hexadecimal color for you, check out this online color picker.

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

9 thoughts on “How to Change Link Colors”

  1. Looked into the style.css file. Cannot find the a:link lines you mention above. I want to change the blue hyperlink’s in the “Modularity Lite” theme to a red. They are not editable in theme options either. I did find $theme colors array for url and links in “theme functions” under editor – but it was not successful in changing my blue links to red. Any suggestions?

Leave a Reply