Top 7 CSS Design Tips for WordPress

WordPress is the world's most popular tool for developing websites, but there will come a time when you would want to perform a customization that is not easily done through your theme settings. If you use a high quality premium theme, you will have loads of options, including changing font sizes and turning various style functions on and off. However, you can also do this manually.

Here are seven CSS design tips for WordPress. Remember, if you are making any of these changes to your stylesheet, make sure you back it up beforehand so that you can reverse anything that does not work as you want it to.

1. Fonts

This is one of the most basic design changes you can make to a WordPress website. Here are your options with some common values:

This will create a five pixel grey shadow under and to the right of the image. You can move where the shadow falls by changing the first two attributes (x-offset and y-offset - both 5px in this example). The third attribute determines the blur of the shadow, which in this example is 3px. The final attribute is the color, which in this example is #888 which is grey.

3. Backgrounds

To change the color of your website's background you need to change the background-color attribute. Yours will probably look like this:

background-color: #ffffff;

That means you have a white background. You can change it to any color you want using HEX color codes.

You can also add a background image to your website. The best way to do this is to have a fixed image so that your content scrolls over the top of the background. The code should look something like this:

Finally, if you don't use developer tools in your browser, you should start using some now. That way, you can test all of these changes on your website without altering the actual code. Both Chrome and IE have developer tools built in, and you can install the popular Firebug app if you use Firefox.