View full size
Download Template
Note: Before you begin using this template make sure you remove thecssTemplate folder from the zipped file. If you try to view this template through the zipped file you may have trouble viewing certain items. Store the unzippedcssTemplate folder on your desktop or in your Documents folder.
Files Included in This Template
This template contains three files: index.html, style.css and instructions.html(the file you're reading now) and a folder called images.
The index.html file is your homepage. If you want to create additional pages you just go to "File/Save As" and rename the page to something else.
The style.css file is your stylesheet and it's what defines various aspects of your page's layout (font size, background colors, column widths, etc.)
Stylesheets are great because you can change your site's entire layout or one aspect of it (the font style, size, color, etc.) by updating the style.css file and your entire site will reflect the update.
Using & Editing The Template
The best way to use this template and learn CSS is to open the index.html and the style.css files in a web editor such as Dreamweaver, CoffeeCup, Komposer, etc. so you can actually see the design. You can open the files in a text editor (Notepad or BBEdit), but all you will be able to see is the code. You'll have to save your work and preview it in a web browser to view your updates.
Make sure you keep the style.css file (stylesheet) and the index.html file in the same folder as you downloaded them. If you separate them the style sheet won't affect your design if you make changes to it.
Start by reading my notes in the index.html and learn how to customize the template to your liking. Keep checking the HTML code in the index.html to see how the different styles are called up.
Notice all the design and layout is controlled in the style.css file so that's the file you will be updating to change the look and feel of index.html.
Remember, the style.css is your master stylesheet.
Header Image
The header of this template contains an image that is 850x100 pixels calledheader.jpg.
I created it in PhotoShop and provided the source files inside the images folder. If you have access to a graphics program that reads PSD or PNG files you can open either header.psd or header.png to make changes to the header image.
If you do not want to use an image in your header, remove the line, background-image: url(header.jpg); from the header section of the stylesheet (style.css). This will clear out the header and you can put text here instead.
Also, when you add additional images to this design, I would continue to save/store them in the images folder to keep your files organized.
Watch the Video Tutorial
To get an overview for how to edit this template, I've put together a 9-minute video tutorial to help you a long. Watch Video Tutorial.
Want to Learn More About Style Sheets (CSS)?
If you want to learn how to apply new styles to your text and layout, W3Schools has a great reference sheet you can use. A style sheet is a powerful thing and it also makes for much cleaner HTML code and faster loading pages.
Enjoy,
Tasawer Abbas
