Proper planning is always required for any project. It doesn’t matter how big or small, taking the time to plan will always save you time in the end.

Taking a look at the Photoshop file, we can prepare the following:

Colours
The following hex values will be needeed in our CSS file.
palette

Images
Looking at the design, we can see that the following images will also need to be incorporated in our templates.

  • background texture
  • logo
  • header background
  • comment bubble
  • main background

For the purpose of this tutorial, I’ve chosen to create a background image for the header and one for the main body area. The header could have been created using a solid colour, but it involves using negative margins which is a bit more complicated. Solid colours could also have been used for the content and sidebar, but if you want to ensure that both columns are the same height, using an image is the easiest way to do it.

Dimensions
Upon closer examination of our Photoshop file we can determine the dimension required for our different containers.

  • header: 960px x 125px
  • logo: 210px x 45px
  • sidebar: 310px wide with 10px top and right margins
  • content: 590px wide with 15px top and bottom margins and 30px on the left and right

Looking at our styles.css template, we can transfer our information and get started.

The top section of the basic framework style sheet contains our reset and some css for styling images and captions which will appear in our posts. This can be left untouched.

Next comes the “Main Layout” section which we can change to:

body {
	margin: 0px; padding: 0px;
	background:#8DC642 url(images/bg.gif) top repeat-x;
	color: #010101;
	font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
}
#wrap {
	position:relative;
	width: 960px;
	margin: 0px auto 0px auto; padding:0;
}

This sets the background colour of our site, our container (wrap) area and sets the font size and family.

We’ll also need to update the Main, Content and Sidebar areas, based on our measurements, as follows:

 #main {
	float:left;
	width:960px;
	background:url(images/main_bg.gif) repeat-y;
	padding-bottom:50px;
}

#content {
	float: right;
	width:570px;
	padding: 15px 30px;
}

#sidebar {
	float:left;
	width:310px;
	margin:10px 0 0 10px;
}

Part 2: Let’s style the header area