David Fiske A subtle blend of affiliate marketing and web development

CSS is a wonderful thing, especially combined with templates. By changing the contents of one file, you can roll out changes site-wide (template files and CSS).

This site will make use a CSS template so at this stage, I'm going to set up a very basic style.css file.

The template page will be split into four areas:
 
A wrapper will encase all the layout <div>'s. This means we can control the page width by changing just one setting.

A header <div> is where I will keep the main navigation and logo.

A content <div> is where I'll keep the outputted text.

A footer <div> will be used to contain copyright information and those horrid (but necessary) links such as terms, privacy and disclaimer.

I'll give each of these a div "id" - there are div "classes" and "id's", an id should be allocated once on a page whereas classes can be used multiple times.

Other basic information required is formatting for the following tags:

• body
• a
• a:hover
• img
• h1
• h2
• h3
• h4 (just in case though I don't think we'll need it)

Here's my basic CSS file - please be aware that this will almost certainly change and grow as I develop the site but it's an excellent starting point:

body {background: #FFF; color:#000; font-size:12px; font-family: 'Trebuchet
MS', Arial, Verdana, sans-serif; margin:20px 0px; padding:0px 0px 10px 0px; }
a {color:#CC0000; background:transparent; font-weight:normal; text-decoration:underline}
a:hover {color:#000099; background:transparent; font-weight:normal; text-decoration:none}
h1 {font-size:20px; letter-spacing: -1px; }
h2 {font-size:18px; font-weight: normal; }
h3 {font-size:14px; font-weight: bold; }
h4 {font-size:12px; font-weight: bold; }
img {border: 0px; }

#wrapper {width:780px; margin:0px auto; padding: 0px; }
#head {}
#content {}
#foot {padding: 5px; text-align: center; color:#C0C0C0; font-size:10px;}
#foot a {color:#C0C0C0; font-weight: normal;}

Okay, now for the basic template.

The header is going to have a basic text logo rather than an image. I'm going to replace this line in head.php:

echo "<div id='head'></div>";

with:

echo "<div id='head'><a href='/' title='My Recipe Site'>My Recipe Site</a></div>";

I haven't wrapped it with a H1 tag as this should be saved for the page description, rather than the site title.

Foot.php is almost perfect although you may wish to change the content within the "foot" div tags to include more copyright information, disclaimers, etc.

Here's what my site looks like at the moment:



That's it. We've now got a reasonably basic but tidy design together with a header and a footer sorted. There's scope to add, edit and remove code if you want. For instance, you may want to add a side menu or a top menu. I won't go into depth as this relates more to design than coding, which this set of articles is intended to be.