• Home
  • What’s New
  • Start Here
  • Customize WordPress
  • Podcast
  • Courses
  • Contact

2 Create a Website Blog

Learn CSS Quickly With This FREE Template

Filed Under: Design, Free Stuff 53 Comments

Free CSS TemplateSince 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!

Comments

  1. Travels In Vizag says

    November 10, 2012 at 12:23 pm

    I love this site

    Reply
  2. Endyst says

    April 8, 2011 at 5:22 am

    Very interesting manual. Thank you for that.

    Reply
  3. Charlie says

    January 27, 2011 at 3:48 pm

    Thank you for the css manual.
    It is great.

    Reply
  4. starcraft says

    November 12, 2010 at 3:21 am

    It is a cool guide for learning css.

    Reply
  5. ahmadinejad sexton says

    October 3, 2010 at 12:00 pm

    Very nice .
    Thank For Sharing,Can I use them on a Free Hosting ?

    Reply
  6. Free Advertising Sites says

    September 11, 2010 at 6:53 am

    I must say your script has been intelligently built for new comers.
    For some, it would take not just hours but days of stressful and sleepless nights.
    Thanks a lot.

    Regards,
    Jessica

    Reply
  7. Mon says

    February 11, 2010 at 11:08 pm

    Oh, thanks Liz.. figured it out 🙂
    .-= Mon´s last blog … Feb 11, Sanguinarian – the blood drinking vampire =-.

    Reply
  8. Mon says

    February 11, 2010 at 10:53 pm

    Hello Lisa,

    Thanks for giving out this freebie, I’ve downloaded your template and it’s seem quite easy to integrate but I can’t seem to figure out how to add my logo to style.css that will reflect when I preview my it.

    Thanks 🙂
    .-= Mon´s last blog … Feb 11, Sanguinarian – the blood drinking vampire =-.

    Reply
  9. Humza says

    December 23, 2009 at 4:49 am

    This is really effective way of learning CSS. So thanks for this great help.

    Reply
  10. Anwara A. Ogbonnaya says

    November 27, 2009 at 9:58 am

    i just needed some body that will help me creat a blogg.

    Reply
  11. Shaon says

    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?

    Reply
  12. Iskander Marrero says

    August 28, 2009 at 2:54 am

    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? =-.

    Reply
  13. kakashi says

    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

    Reply
    • lisa says

      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
  14. Heather Prosser says

    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

    Reply
  15. reift says

    April 1, 2009 at 9:39 am

    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.

    Reply
  16. jawid says

    March 6, 2009 at 7:56 am

    thank you Lisa,

    Reply
  17. Eddie says

    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

    Reply
  18. lisa says

    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. 🙂

    Reply
  19. Eddie says

    March 2, 2009 at 3:26 pm

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

    Reply
  20. lisa says

    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.

    Reply
  21. Eddie says

    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 ?

    Reply
  22. lisa says

    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.

    Reply
  23. Eddie says

    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.

    Reply
  24. lisa says

    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.

    Reply
  25. Eddie says

    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

    Reply
  26. lisa says

    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).

    Reply
  27. Eddie says

    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

    Reply
  28. lisa says

    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.

    Reply
    • rahul says

      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
  29. Blogevolution2.0 says

    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

    Reply
  30. Cameron says

    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

    Reply
  31. Cameron says

    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.

    Reply
  32. Festival says

    August 30, 2008 at 2:24 pm

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

    thanks

    Reply
  33. Jian says

    August 25, 2008 at 1:07 am

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

    Reply
  34. Jian says

    August 25, 2008 at 1:06 am

    Really too good info on css templates.

    Reply
  35. Gene says

    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

    Reply
  36. Haytham says

    June 5, 2008 at 12:36 am

    thank u very much
    i will learn it 🙂

    Reply
  37. Jimmy79 says

    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

    Reply
  38. Rumi says

    May 6, 2008 at 10:35 pm

    Thanks Lisa,

    I didn’t read the transition guidelines yet.

    Reply
  39. lisa says

    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.

    Reply
  40. Rumi says

    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 🙂

    Reply
  41. Jimmy79 says

    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

    Reply
  42. Tina says

    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!

    Reply
  43. Internet Mama says

    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!

    Reply
  44. JaMina says

    March 22, 2008 at 5:21 pm

    Awesome!!

    Reply
  45. Carlos says

    March 19, 2008 at 2:20 pm

    thank you for providing us with this.

    Reply
  46. Vega says

    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

    ty

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

    Reply
    • zek says

      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
  47. GMill says

    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.

    Reply
  48. jiggy says

    February 24, 2008 at 11:55 pm

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

    Reply
  49. fandd says

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search This Blog

Enroll In My Online Courses!

Most Recent Posts

  • I Made $5,000 in 12 Hours With a Small Audience
  • My First $3,000 Month With My Ecommerce Brand
  • Why I Removed My 2Create Courses & More Updates!
  • Passive Income Shifts & What My Marketing DNA Test Results Revealed
  • My Income Evolution Online, Personal Growth & More!
  • Earning With The Amazon Influencer Program and Tutorial
  • Google Warns: Secure Your Site By October or Else…

Get My Blog and Podcast updates

Sign up so you never miss any of my new tips and tricks on my blog and podcast.

About Me

I make a living doing what I love -- teaching online. And I can't wait to help you learn. More about me.

Copyright © 2023 Blog Powered by The Daily Dish Studiopress Theme | Privacy Policy | Affiliate Disclosure