Resetting and Rebuilding WP Themes CSS and Defining Layouts

To undertake the task of building a WordPress theme with the help of CSS, we’re going to need the following things:

1. A style sheet that resets default CSS across all web browsers and makes a sane standard we can work from.
2. Another style sheet that rebuilds our typographical foundations in a smart way.
3. A style sheet just for WordPress classes (keeping the first two pure so we can use them for non-WordPress projects).
4. A series of 6 fluid style sheets that will create ALL the common blog and website layouts you expect—and each one ready to adapt into a fixed width layout..

Now, first of all, make a “style” directory in your Theme folder. That’s where we’ll be putting everything. Now we have to perform Reset CSS. What this does is equalize the rendering of every browser, leaving you free to ignore countless individual quirks particular to each one. Using it is simple. Add the following lines to your style.css, at the very top, immediately after the initial comments section.

Now, we have to tackle with the Rebuild CSS. What it basically does is combine the best of both worlds for web typography: using Pixels for font height, with relative line-height for the main declaration on the body element, and Ems for all subsequent vertical margins (like for paragraphs and lists). Using rebuild.css is also really easy. Just add the following lines immediately after your reset.css import.

@import url('styles/rebuild.css');

There are some elements in WordPress that you’re just going to have to style every time. These styles include handling captions and image galleries. All you need to do is add a class of left or right to the blockquote tag and you’re ready to roll. Here’s what needs to be done:

Using anyone of these layouts is simple. Immediately after your basic WordPress styles import, import one of these layouts. Here’s how to import the 3 column layout, with the content in the center.

The simplest method of turning any one of these layouts into a fixed-width layout is to add a width and centering margin to the #wrapper div.

In the next tutorial, we would discuss the remaining details or the complete WordPress theme customization.