CSS: Change Link Colors Site-Wide

CSS: Change Link Colors Site-Wide with Custom CSS in WordPress. Quick and Easy, Even for Beginners.

In this video you’re going to learn how to change the link colors for your entire website in one quick and easy lesson.

I would have published this a few days ago but Twenty Seventeen proved to be a tough nut to crack. If you don’t like the way links are presented in Twenty Seventeen then here’s a couple of links where you can find code to fix it.

WordPress Support: Removing Anchor Underlines
WordPress Support: Twenty Seventeen Underlines

Or you can choose a different theme Choose a New Theme

This time I’m using the popular ColorMag theme to demonstrate the link colors.

Traditionally, links (also known as hyperlinks) were blue. But now you can have your links any color you like. So you can choose a color that looks good with the colors you’re using on your website.

Here’s the Code:

For basic colors you can just use the name of the color:

/* unvisited link */
a:link {

color: blue;
}

/* visited link */
a:visited {
color: green;
}


/* mouse over link */
a:hover {
color: orange;
}


/* selected link */
a:active {
color: red;
}

Of course if you have favorite shades then you can use the hex value.

/* unvisited link blue */
a:link {
Color: #196380;
}


/* visited link green */
a:visited {
color: #248f24;
}


/* mouse over link orange */
a:hover {
color: #ff3300;
}


/* selected link red*/
a:active {
color: #cc0000;
}

Widget Links are in a Class of Their Own

.widget ul li:hover, .widget ol li:hover { background-color: none; }
.widget ul li a, .widget ol li a { color: red !important}
.x-topbar a:hover { color: green !important; }
.widget ul li:hover a,
.widget ol li:hover a {
color: green !important;
}

Change the colors to suit your website using the names of the colors or the hex values of your choice.

The tag “!important” is sometimes necessary to enforce the new values.

To find the hex values for your favorite hues use the colors picker at W3Schools

The choices are almost endless so make them yours.

More stuff you can do with CSS

Change Font Size Site-Wide
Change Font Colors Site-Wide
Change Font Family Site-Wide


Please scroll down for comments.

8 thoughts on “CSS: Change Link Colors Site-Wide”

  1. Thank you for the video. I am still really new to building websites so this was very helpful. I followed the video and was able to change the color of my hyperlinks and could see the changes on my screen. I clicked publish to save my changes but when I visit my site from another device the links didn’t change color. What am I doing wrong. Thanks

    Reply
    • This is most likely a caching thing. It takes time for all your changes to get updated throughout the internet.

      Reply
  2. Hi there,

    I have a custom theme and am unsure how to change just the color of hyperlinks embedded in posts (links to other sites). Right now they’re yellow on a white background and I would like to change that.

    Reply
    • It should not make much difference which theme you’re using, John. Go to Appearance > Customise and you should be able to find an area where you can add Custom CSS. Watch the video again if you’re still unsure.

      Reply
      • Ok, I tried all the links and am more clear on my issue now: I would like to make unvisited links only for hyperlinks embedded in other posts to be a different color, with all other webpage links remaining the same color. Is that possible?

      • That may be possible, John, but it would be rather complicated, certainly beyond my pay grade. Don’t overcomplicate things. Ask yourself: is it really that important? And wouldn’t it be confusing for your site’s visitors to have different colours for different links?

  3. Thank you…………
    My site Hyperlink got colorless means all empty spaces wherever the text is hypelinked. Applied your code & I am a happy customer.

    God bless you

    Reply

Leave a Comment

Skip to content