Learn CSS Quickly With This FREE Template
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.
Enjoy and happy learning!
If you enjoyed this post, please Stumble it!. Feel free to leave a comment or subscribe to my RSS feed and receive future articles delivered to your feed reader.
Related Posts...
- Creating HTML Tables The Easy Way
- My Site Gets a Facelift!
- Help! I’m Clueless About Web Design
- Test Drive WordPress Themes In Windows
- My Biggest Design Mistake… Ever!
Comments
Lisa, Your site is great! I am looking forward to my $3000 monthly from adsense, your information is bring me closer to it. THANK YOU.
this is a good starter
i good at customizing this but my only problem is
using paypal
Im a bit toooooooo young to even have a credit card
but i have much extra money
im about 14 yrs but good with this
can u give me some very VERY useful advice
ty
P.S.
this is not a joke
im already finished with my html’s
Wow! Amazing give away. This is exactly what I’ve been looking for to revamp an old site I paid an extortionate amount to be designed back in the day.
Perfect, thanks Lisa. You really do rock!
Thanks so much for this! So hard to find exactly what you are looking for and I have a bit of CSS experience. Thanks again!
Wow, Thanks so much for this CSS template. I think is perfect for mi site. I’m in the process of learning advance html and Css
Hi Lisa,
Thanks a lot for this template. Today I decide to create my new site with it and there is something I can’t catch.
I think I need SSI for nav bar on every page in order to change only on one place when I want to change my navigation bar.
If possible, please update your template with nav bar SSI that will work with SBI, because my new site will be made with SBI :)
Rumi, the reason I didn’t add the SSI part is because the coding is different for SBI! so if someone who doesn’t own SBI! downloads this template, then it won’t work. When you’re ready to convert this template to SBI! then make sure you read the SBI! Transition Guidelines. It will show you how to create the SSI part. I did it for my site with no problem.
I love this template, it’s great. The best part is the 3 column layout. I am still learning with tutorials and books and I m trying to figure out the easiest way to:
1) how to get a horizontal line to divide each button link on the Nav. bar?
2) how to have the dotted or dashed borders that divide the 3 columns ?
If you could give me some help on this, would be much appreciate it.
thanx
Leave a comment
Thanks for taking the time to do this. At first glance, it looks very helpful. I can’t wait to dig in and learn! I’m an old HTML girl who needs some new tricks.