Learn CSS Quickly With This FREE Template

February 22, 2008 · 45 comments

Free CSS 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.

————–

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!

Tagged as: 3 column template, cascading style sheets, css, css template

{ 1 trackback }

CSS Tutorial | Conquer Your CSS Fears In A Few Hours: July 29, 2009 at 8:40 pm

{ 44 comments… read them below or add one }

1 fandd February 24, 2008 at 10:42 am

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.

2 jiggy February 24, 2008 at 11:55 pm Follow on Twitter: @coreymonroe

totally dig your site! keep up with the fantastic work! cheers~

3 GMill February 25, 2008 at 1:40 am

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.

4 Vega February 26, 2008 at 7:28 am

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

P.S.
this is not a joke
im already finished with my html’s

5 zek November 22, 2009 at 4:32 am: hello girl. i understand that but you should know that today, even you don’t have any credit card to verify you paypal, we have other way call, VCC. contact me if you want to get one to verify you account.

got yahoo messenger? add me up then we can share knowledge together.
my email: sanzo_park@yahoo.com

Reply

6 Carlos March 19, 2008 at 2:20 pm Follow on Twitter: @coreymonroe

thank you for providing us with this.

7 JaMina March 22, 2008 at 5:21 pm

Awesome!!

8 Internet Mama March 27, 2008 at 9:01 pm

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!

9 Tina April 5, 2008 at 8:28 pm

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!

10 Jimmy79 April 25, 2008 at 3:47 pm

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

11 Rumi May 6, 2008 at 11:08 am

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

12 lisa May 6, 2008 at 11:36 am

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.

13 Rumi May 6, 2008 at 10:35 pm

Thanks Lisa,

I didn’t read the transition guidelines yet.

14 Jimmy79 May 8, 2008 at 11:43 am

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

15 Haytham June 5, 2008 at 12:36 am

thank u very much
i will learn it

16 Gene August 2, 2008 at 8:28 pm

I am so glad I found this site!!! I am new and have purchased and out of the box website, and I need to change a few things and I need to learn how to do it my self to cut cost. and just because I want to learn. I may one day try to build a site from the ground up, Ha ha. now that is a long way off. but it is another goal. you do make learning or getting the basic idea of css much easier to visualize, thank you so much. by the way I have also become a subscriber. smile. gene

17 Jian August 25, 2008 at 1:06 am

Really too good info on css templates.

18 Jian August 25, 2008 at 1:07 am

and it is too informative.
http://www.sleekinfo.com

19 Festival August 30, 2008 at 2:24 pm

It’s very useful CSS tips for blog. so i can use it.

thanks

20 Cameron November 26, 2008 at 6:47 pm

um, i downloaded one of your templates from http://www.2createawebsite.com/build/templates.html and i can’t figure out how to put it on coffee cup.

21 Cameron November 26, 2008 at 7:00 pm

like i have all the coding to put into the CSS sheet, i just don’t know how to get to the CSS sheet on coffee cup

22 Blogevolution2.0 February 8, 2009 at 6:45 pm

Lisa, once again you are not to be outdone. How do you continue to bring it like this?
This is so awesome.

Question…How would I take a wordpress hosted blog and switch it over to my own hosting account?

Terry

23 lisa February 25, 2009 at 6:03 pm

Hi Terry,

Just now seeing this. Export your posts to your PC and when you setup your WordPress blog on your domain/hosting account you can import the posts. Make sure you choose a host like Hostgator that will allow you to easily install the WordPress software on your domain.

24 rahul April 23, 2009 at 9:54 am: hi lisa i have started my new work of web design after watching ur video ur so helpfull please reply iwant to give u some suggesation about ur site

Reply

25 Eddie March 2, 2009 at 12:15 pm

Hi Lisa,
I hope all is well with you. I am having a little trouble. Here is my situation I have a have downloaded your three column template. I also have had a new header/banner made for my website. I want to keep the SBI navbar, all the pages the same and upload my new header/banner 850px and side bar is that possible? If it is possible can you give me instructions on how to do this.

Thank you
Eddie

26 lisa March 2, 2009 at 1:00 pm

Hi Eddie

If you just want to change your header you don’t really need my template. I believe you can login to the Look and Feel Selector in Site Central and choose the “Customize Header” option (Sidebar too).

27 Eddie March 2, 2009 at 1:33 pm

Hi Lisa,
Thanks for your fast reply. I logged into Look and Feel I only see customize site elements, customize logo, and customize navbar. I also went into those catagories I do not see anything that say’s customize header or sidebar. Do you happen to know where I can find these areas?

Thanks you Lisa

Eddie

28 lisa March 2, 2009 at 1:50 pm

Nevermind. It is “customize logo” not the header, sorry. If you want to customize your entire header you are going to have to read the transition guidelines under “Upload Your Own HTML” and make the full transition to uploading your own HTML code even though you want to keep the navbar.

29 Eddie March 2, 2009 at 2:36 pm

That’s okay, I have read the transition guidelines ans watched the uploading html video. Where I get confused is when listening to the voide it seems like they are talking about building a new page using html and I just want to upload a new header and add a sidebar. Any thoughts.

30 lisa March 2, 2009 at 2:46 pm

But that’s just it. Because of how SBI! is created on the backend (technical constraints), you cannot customize your header until you transition out of the Block by Block builder and do your own HTML from scratch. You can’t just upload a custom header but continue to use the block by block builder to manage your content.

31 Eddie March 2, 2009 at 2:55 pm

Okay I understand now but I will not loose all my existing block by block built pages when I transition to html will I ?

32 lisa March 2, 2009 at 3:00 pm

No, you have to save the content. For example when I transitioned to my “Own HTML”, I created my new design in Dreamweaver and copied my existing content into the template on my new design.

33 Eddie March 2, 2009 at 3:26 pm

Wow I have around 500 pages I am going to have to do each one separately?

34 lisa March 2, 2009 at 5:14 pm

Unfortunately, yes you do. That’s why it’s better to get on it sooner rather than later if you are serious about doing this.

35 Eddie March 2, 2009 at 5:34 pm

If I would have known believe me I would have. Thank you Lisa for all your help. You are awesome!!

Eddie

36 jawid March 6, 2009 at 7:56 am

thank you Lisa,

37 reift April 1, 2009 at 9:39 am Follow on Twitter: @leapbrowser

Once again lisa shows why her selfless use of information benefits us all. Css styles sheets were the toughest thing i had come across so far. thanks for making it simple.

38 Heather Prosser April 8, 2009 at 1:17 pm

Hi! I have just spent all day reading your information that was passed onto me. WOW! I am a photographer and these days marketing, blogs, web sites is so important. I want a new blog and customizing it with photos in the header is so important. Does SBI do this? I need something really stylish and I upload lots of photos. I have also been realizing adding adsense or e-books to my blog would be cool for added income, especially when they can be about photography, weddings etc. Thanks so much!Heather

39 kakashi May 18, 2009 at 8:13 pm

I was watching the css tutorial and as you said in the first tutorial.
I created a new folder, inside that folder I created a new text document and I named it style.css. than I created another folder and I named it index.html.
i have downloaded one of your template that goes with the tutorial the problem is I can’t figure out how to integrate the template into the index.html
thank you in advanced for your help

by the way I LOVE YOUR WEBSITE

40 lisa May 18, 2009 at 10:13 pm: You only need one folder. The index.html file and style.css file should both sit inside the same folder. You open the index.html to make changes to the actual page. Open the style.css to make changes to global styles. You shouldn’t have to create any folders. I provide them with the template. So if you just extract the folder I provided and open the two files you should be good to go.

Reply

41 Iskander Marrero August 28, 2009 at 2:54 am Follow on Twitter: @ZanMarr

Thanks a lot for this, it will help me so much.
can’t wait to make some cool sites!
Iskander Marrero´s last blog … Click all the way to the bank? or NOT?

42 Shaon September 7, 2009 at 2:30 am

Hi Lisa,

I have downloaded this 3 column CSS template and opened from Dreamweaver; but its not aligned properly, the middle column is not top aligned properly with left and right nave, its starting from the bottom of left and right nave. Could you please help to fix it, I really want to have this template for my website and is that possible for me to have contact us form in this template?

43 Anwara A. Ogbonnaya November 27, 2009 at 9:58 am Follow on Twitter: @41999930929