All the web projects I work on need custom written CSS stylesheets. While some elements like classes and id’s might be the same most of them aren’t. I always design everything from scratch, I know some work of off templates but I feel it limits the creative process and encourage cutting corners. You want every design/client to be as unique as possible, but some things can be automated.

I use WordPress for most of my web design work, and I’m about to give you a reason for doing that as well ;) if you don’t already.

I use two pre written stylesheets in almost all projects. I use the reset-styles.css written by Eric Meyer, and my own content stylesheet.

Resetting Browser Styles

Most if not every imaginable browser on the market apply its own set default styles to every web page they feed to the user. This means that if you don’t define certain styles like margins and line-height, then the browser will define them for you. As every browser defines these styles differently, you will not get any consistency unless you define them yourself. By using Mr. Meyers stylesheet you ensure that you reset all browser styles to zero. This does two things for you:

1. It gives you consistency across browsers.
2. It ensures that you don’t forget to define the styles that will screw up your precious design.

Reset your stylesheets to improve browser compatibility

Just download the stylesheet and put it in the same folder as your main stylesheet and use the @import command to apply them to your design.

Custom WordPress Post Styles

Now that you have reset all your styles you will want to define them. I like to think of this as applying my own default stylesheet to all browsers. If you don’t define any styles all you headers (h1, h2, h3 etc.) will all look the same, your list (ul, ol) will look like plain text.

The Solution

There are certain content styles that won’t deviate much from one design to the design. For the web, you mostly use a line-height of 1½ or 2 times the font size. You list items will have slightly more ‘air’ between them and they will be slightly indented. Your headers will decrease in size from <h1> through to <h6>. I have created a stylesheet that assigns a default value to all these elements so you don’t have to do it every time.

WordPress generate a lot of styles on the fly that makes it easy to make this consistent over many designs. One of the things that I have found useful is to style all my images according the align property assigned by WordPress. When you insert an image in your post, you choose how you want to align it, and WordPress will automatically give the <img> an appropriate class. You also have the ability to use captions from within the image editor, this will also trigger WordPress to assign a certain class to the image. These styles are consistent across all WP sites, so why not apply you own values to these as well. Remember, we are only concerned with content styles that will be the same on the majority of designs.

Some of the styles in the css file include consistent styling for images aligned left, right or centred. It ensures that the image captions will show up nicely no matter how your layout varies. Blockquotes will be slightly indented with a background image and a background colour. All the list and paragraphs will have defined line-heights, margins and padding.

Right, Show me the Meat!

This save a tremendous amount of time and the values are consistent across most designs. You can easily go in and edit the content stylesheet to suit your needs. The colours used in the document are all listed at the top, so it’s just a matter of using the find/replace command if you want to change all of them at once.

Download

Go grab the zip file or have a look at the demo page.

The zip file includes all the files and images you need. Just leave the folder hierachy intact and you are good to go.