From your WordPress leftside bar click on Appearance. Next, click on Editor which will open up the CSS style sheet notes. It is wise to have a back up of this info so that if you accidentally change anything, you can reload it and fix your mistakes. So, select all (Control + A) and then copy (Control + C) and then open up Notepad or Wordpad and paste (Control + V) the contents into the new document and save it as CSS.txt.

To change the background color: look for this text:

#wrap {
                background: #f0dbe6;

The pound sign (“#”) is the symbol that precedes the hexadecimal color number. In my site, the pale pink background is # f0dbe6. Usually a background is color coded black (#000000) or white (#FFFFFF). You can always look up hexadecimal colors at this website that will help you with picking colors: Color Scheme Designer. All the colors are noted in RGB with the hexadecimal next to it. You can explore this cool site and get great ideas for creating your own unique color scheme.

To change the navigation button hover color: look for this text in the CSS script:

#nav a:hover {
                                 background: #495944;

Tip: Look for universal color changes. If you are replacing a blue color with red, everywhere you see the blue hexadecimal number swap it out for red’s number. Look up each color number you come across in the style sheet and then look at the original design. Chances are that you will begin to see a pattern of everything that needs changing. Also, make sure that if you are, for example, swapping out hexadecimal color #445566 with #CC0077 that you make a note of it. If you need to back track, at least you know where you went wrong.

Not all CSS scripts look the same. Not all sites are going to be easy to make tweaks to, but if you look for one simple thing to change and have success with it, keep going and before long, you will be an expert in manipulating your web site’s creative color look and feel.