How to Make WordPress Links a Different Color
Table of Contents
While WordPress can work wonders, it can be equally painful to manage. Chances are, if you’re looking at this page, you’re wondering how to change link color in WordPress. We’ll show you exactly how to change links’ color in WordPressl!
Before we begin, we have to take a detour and check out how to specify colors in CSS. In general, CSS statements are in the format [property] : [value].
As you probably guessed, the property that allows you to change the CSS link color is simply “color”. After we put “color:” down, we need to set its value. There are certain preset keywords, such as “aqua” and “blue” that are recognized.
You can also specify “RGB” (Red, Green, Blue) colors in CSS (see here for info). The oldest and most commonly used way to specify color is a hexadecimal value. For this tutorial, we will be using hexadecimal values to define colors.
Don’t have the whole chart memorized? Here’s a great one!
1. Log into your WordPress portal.
2. Go to Appearance > Customize
3. On the bottom left, you should see a link that says “Additional CSS”. Click that.
4. Add the following code in the box that comes up (and make sure you don’t delete existing CSS!).
What it all Means
The “a” stands for “anchor”, which means we are defining a rule for all “anchors” (HTML fancy-talk for “link”). We have our property “color” and it is set to the value of “#00ffff”, or bright blue. Copying and pasting that is how to change link color in WordPress, but this doesn’t address other situations. This just sets the default link color. You can also change the link hover color in WordPress and the text color to custom hex values, as we’ll do next.
CSS uses an oddity known as a “pseudo-class” to change link hover text color in WordPress. It’s in the format:
This CSS block would make it so that when a user hovers over a link, the text of the link turns black. This color would be a design choice disaster, but try picking an appropriate one for your theme. Note that the block with just “a” and the block with “a:hover” both belong in the “styles.css” file. A tutorial on how to change link color in WordPress wouldn’t be complete without looking at how to change the color of links that a user has already visited. In order to understand how to change the appearance of links in WordPress, you need to learn the last important “pseudo-class” for “anchors” (links). Use this format:
This would make it so that the link color is gray after a user has visited a link on your WordPress site. Again, note that, even though these three CSS blocks use the “a” element, you must have them each as their own block in your CSS code.
The Modern Way
Now that you know how to change link color in WordPress using all three pseudo-classes on the “a” element, it’s time to ramp it up! We used hex in the previous examples, but there are some shortcuts that may help you in the future.
For example, every major color (and many other colors you wouldn’t have guessed were keywords) can be a value. color: green; is a valid keyword. You should always use reference material as we linked at the beginning and try to memorize some of the very commonly used colors. Be careful when you use keywords, as older browsers sometimes do not recognize newer ones!
For those who need complete creative control over the color of their text, the RGB method we mentioned in the beginning can come in handy. There is a CSS “function” that will output a color based on the amount of red, green, and blue you put in, and it’s named predictably “rgb”. You can use this function one of two ways; you can either use percentages to define the RGB values, or you can use numeric values from 0 through 255 for each parameter of the function.
Let’s take a look at how this would look in practice. Say we want an aqua color. I know that we could just use the “aqua” keyword, but let’s use numeric RGB. If I want all of my links’ default text to be set to this, I could use the following CSS block:
Even though you now are probably getting a better grasp on how to change link color in WordPress, let’s do just one more example! Let’s do the exact same thing as we did just above, but using the percentage method instead.
At this point, you should be able to change CSS links’ colors easily (with some practice, just like everything else). It’s important to remember that if you’re using numeric values, the highest value is 255, and 255 is equivalent to saying 100%
The Importance of !Important
CSS experts have been debating for years whether to get rid of the !important flag since it’s often used improperly. Essentially, the !important method performs a complete override of any conflicting styles. For example, if you’re using another CSS file, your links may be set to a certain color. If you’ve copied and pasted code with internal CSS (don’t feel guilty; most developers have done it!), content in your main style sheet will have no effect.
Although the “proper” way to settle style conflicts is to go into the HTML, add some divs and spans where applicable, and then just add that div or span to your style sheet. If you’re a web developer, chances are you already know this. However, if you’re just starting out and simply need to learn how to change link color in WordPress, the “!important” trick can save hours of troubleshooting (this is from my own, direct experience with it).
Say we’re trying to make our links all aqua with this CSS block:
Then, you don’t see any changes on your page. With so many layers of CSS files, it’s quite possible that it’s getting overridden by another style sheet. If that’s the case, you would try this block instead and let CSS work its magic:
color: aqua !important
And there you have it! You hopefully have now learned how to change link color in WordPress in a variety of ways and for a variety of pseudo-classes!
How To Choose A Web Hosting Service The Checklist When it comes to launching a website, you will soon realize there are lots of lingo