CSS: Change Font Colors Site-Wide

Change Font 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 text colors for your entire website in one quick and easy lesson.

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

Some themes use light gray for the text color which can be hard to read.

I also find that harsh black is not easy on the eyes either.

So I like to use dark gray.

Here are few dark gray shades to choose from.

  • #404040
  • #333333
  • #262626
  • #1a1a1a

Here’s the code you need for general (paragraph) text:

p {
color: #1a1a1a;
}

And you can jazz things up a bit by using a different color for your headings, H2 to H6. Please choose one color for all your headings, don’t mix them up. Two text colors on one page look good but three is meh!

H1 {
color: #ff0066;
}
H2 {
color: #ff0066;
}
H3 {
color: #ff0066;
}

etc.

Or if green is your thing:

H1 {
color: #00ff00;
}
H2 {
color: #00ff00;
}
H3 {
color: #00ff00;
}

etc.

For standard colors, you can just name the color instead of using the hex color e.g. red, blue, green, etc.

H1 {
color: red;
}

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 your favorite hues use the color picker at W3 Schools Colors Picker The color choices are almost endless so make them yours.

More stuff you can do with CSS


Please scroll down for comments.

6 thoughts on “CSS: Change Font Colors Site-Wide”

  1. THANKS A LOT, MARION, FOR ALL THIS USEFUL INFORMATION!
    Is this working also when you have a specific theme which has theme options for itself? Is it overriding the theme or does the theme override what you insert into the additional CSS section of WordPress?
    Thanks for the info.
    Heidi

    Reply
    • If you’re using a theme which has lots of options then it makes sense to use the theme’s customizer instead of CSS. The custom CSS is usually the last thing that gets loaded so it overrides anything that comes before it. That being said to force an override when the CSS doesn’t appear to be working you can add !important just before the semi-colon
      e.g.
      p {
      color: #1a1a1a !important;
      }

      Reply
      • Thank you for the info, that helps – and I understand the meaning of “important” (=override). Learning never ends. And thanks for allowing and enabling us to learn!
        Heidi

  2. Hi Marion,

    Thanks for this excellent video on changing font colors site-wide. I took note of your comment on the website comment exchange group and here I am having a look at your training!

    Now I will go ahead and make the change to a darker font on my website, as what I have had to now is a bit hard to see on some screens plus for people like me with eyesight issues, it is needed.

    My next question for you is anout font size. I like a somewhat bigger font for my posts, is there a way to do a change site wide for that too?

    Thanks a lot for your advice and training, have a great day!

    Dave

    Reply

Leave a Comment

>
Skip to content