Looking to change the text colors in your WordPress site?
Maybe you just don’t like your theme’s default colors. Maybe you have brand colors you want to add. Or maybe you just want text to pop a little more.
Well, today I’m going to teach you how to change text color in WordPress using some simple CSS. And don’t worry: if you can copy and paste, you can do this.
Video Tutorial: How To Change Text Color in WordPress
Step 1: Finding the CSS Selector
Before you can make any changes to your site, you need to figure out what CSS selector is controlling the element’s text color.
There’s an easy way to do this.
You’ll need to open Google Chrome (or, if you are using Firefox, install Firebug). Right click on the element you want to change and click “Inspect Element”. A window will pop open at the bottom of the screen. On the right hand side of this window, you’ll see all the CSS rules that control this element.
Find the selector that controls the color. It will be look something like this:
It may also be
Once you’ve found the particular selector that controls the element, write it down, as we will use it in Step 3.
Bonus: You can even make changes in this tool to see what it will look like before adding it to your site.
If you’d like to learn even more about CSS selectors, check out: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
Step 2: Choosing a Hex Color Code
Now that we know what CSS selector to use, we need to find the hex color code for our desired color.
But first, what is a hex color code?
A hex color code is a 6 digit number that corresponds to a color.
For instance, #FFFFFF is white. #000000 is black.
To find the color you’d like to use, I recommend checking out this tool:
It will let you select a color and then give you the hex color code for it.
Find the hex color code you like and copy the 6 digit number.
Step 3: Making Adjustments to Style.css
Now it’s time to change the code so that your text is your desired color.
In your WordPress backend, go to “Appearance” >> “Editor”.
What opens up by default is a file called style.css, also known as your theme’s stylesheet. It contains all the CSS rules which control the appearance of your site.
In Step 1, I had you figure out what the CSS selector was that controls the desired element’s text color.
To find the selector within the stylesheet, do a “Find” command in your browser.
Once you’ve found the selector, look for the color: property.
You’ll want to change the value from whatever hex color code is there currently to the one you selected in Step 2.
Click “Update File” to save your changes.
Reload your page and be sure your color has taken effect.
And that’s all there is to it.
As a side note, if you don’t see your new color, first try clearing your browser’s cache (that is sometimes the problem). Otherwise, you may have added the color to the wrong selector. Be sure you have the right selector by using the Inspect Element tool again.
If you’d like to make more changes to your text, check out our tutorial How To Change Font and Font Size in WordPress.