Making a simple CSS Template--tutorial.jcwcn.com

This guide will show you how to create your own CSS Template, it has been designed with beginners in mind and I will gladly answer any questions you have in the comments section. I have decided not to go into too much detail regarding what each CSS Attribute does, if you are unsure why something is used, pop a question in the comments.

For this exercise you will need:

A text editor: I would recommend PSPad as it allows you to work with the code easily and has auto-complete. Download PSPad (opens in new window)
A browser: Although your template will (hopefully) work in current browsers, I would suggest downloading and using Firefox as is can install add-ons to help support you when building your template. Download Firefox(opens in new window)

If you get stuck at a point with in this tutorial you can download the source files as a reference here

Step 1, Preparing files

Ok to start with create a new folder on your desktop called my-website.
1. Within this folder right click -> new -> text document.
2. Call this index.html (make sure you don’t end the file in .txt)
3. Create another text document
4. Call this main.css (make sure you don’t end the file in .txt)
5. Now open index.html within Firefox
1. Open index.html within PSPad put a space within your document
  1. Select HTML from the top menu
  2. Select the submenu TiDy
  3. Select the submenu TiDy Convert to XHTML
  4. This will then generate something that looks like this:
2. Next you need to link to the CSS file, insert the below code in anywhere in between the <head> </head> tags.

Step 2, Producing the structure

Our template will be made using non-tabular CSS with a maximum width of 950px, of course this could go right upto 1000px, but for this template it’s 950px. We will be doing a header/banner space and then 2 columns, the left being called the left-sidebar and the right being called main-content.

Below I have included everything you need to paste in between the <body> </body> tags. I have colour coded the divs to help seperate the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
<link rel="stylesheet" href="main.css" type="text/css" />
 </head>
 <body>
<div id="main">
<div class="header">
website header
</div>
<div class="left-sidebar">
left sidebar
</div>
<div class="main-content">
main content
</div>
<div class="footer">
footer text
</div>
</div>
 </body>
</html>

Step 3, Adding styles to the main.css file

If you view the above file within your browser you will only see the 3 divs under each other aligned to the left. To complete the basic template you need to add elements to the style sheet. Paste the content below into your main.css file.

/*CSS DOCUMENT*/

/*tidy up the appearance of the page*/
body
{
font-family: verdana;
color: #000000;
font-size: 12px;
margin: 0;
padding: 0;
}

/*I'll now add the classes we assigned when making the html file.*/
#main
{
width: 950px;
margin: 10px auto;
}

.header
{
height: 150px;
background: #666666;
}

.left-sidebar
{
width: 150px;
float: left;
background: #929292;
}

.main-content
{
width: 800px; /* 950px minus 150px from the sidebar */
float: left;
background: #e1e1e1;
}

.footer
{
clear: both;
}

Once this has been saved. If you now refresh your page in your browser, you should see a working template. Now you have a template complete you can have a go at customising it.

This is only the basics to get you started, coming soon: Optimising your template, Integrating your design with Wordpress, creating a menu, browser bugs and how to avoid them.

If you get stuck at a point with in this tutorial you can download the source files as a reference here

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Making a simple CSS Template

relation tutorial

Category

New

Hot