Since my flat stomach site has been completely “CSS’ed”, I’ve really been pushing the benefits of using CSS on your site.
If you are looking to start your first site or want to redesign your existing one, this blog post is important.
CSS (Cascading Style Sheets) allows you to control large sections of your site’s design and layout by updating one file.
Not only does it make your HTML code much cleaner, but it makes for faster loading Web pages and quick site-wide updates.
You should never build a site or blog without it.
To help you learn CSS, I’ve taken my template from flat-stomach-exercises.com and provided it as a free download. I’ve inserted notes so you can learn how to make updates. This is something I wish someone had done for me. I probably would have picked it up faster had it been presented like this.
Now, don’t be frightened when you first see the template because it looks nothing like my finished site. I did that for a reason. First of all, I want you to create your own design, and I want you to understand how the CSS file controls the various areas of the site.
So what you will find when you download the template is a completely “dumbed down” version with no logos or cohesive colors. I’ve provided instructions in the index.html file so you can customize the template to your liking.
Download my free 3 column CSS template here and don’t forget to read the instructions.html file first! Also do not try to view the template file (index.html) through the zipped folder.
It will not display properly if you try to double-click the index.html file while inside the zipped folder.
Open the zipped folder and drag the “CSSTemplate1” folder to your Desktop (or some location on your PC) and then view the index.html file.
When you open the folder you should see 3 files…
1) instructions.html file – Please read this first
2) index.html – Your homepage and template you can modify
3) style.css – This is your style sheet and controls the index.html file’s layout and design
To get the most out of this, it’s best to open the template files in a Web editor like FrontPage, Dreamweaver, Nvu (free) or CoffeeCup.
Update 6/12/08: I have also created a slightly different version of this template that includes a header image. You can download it here and watch the instructional video to learn how to customize it.
Enjoy and happy learning!