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. 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’s a few 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, H1 to H6. Please choose one color for all your headings, don’t mix them up. Two text colors on one page looks 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

Change Font Size Site-Wide Change Font Family Site-Wide Change Link Colors Site-Wide
Please scroll down for comments.
Marion

About the Author

Marion

Marion is the founder and owner of Marion Black Online. When she's not creating "How to" videos, she enjoys spending time with her family, shopping, and binge-watching an entire TV series in one day.

"10 Steps to Start Blogging"
Free Mini-Course


Step by step video training to launch your own online business

  • Heidi says:

    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

    • Marion says:

      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;
      }

      • Heidi says:

        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

  • David A Sweney says:

    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

  • >