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!
I love this site
Very interesting manual. Thank you for that.
Thank you for the css manual.
It is great.
It is a cool guide for learning css.
Very nice .
Thank For Sharing,Can I use them on a Free Hosting ?
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
Oh, thanks Liz.. figured it out 🙂
.-= Mon´s last blog … Feb 11, Sanguinarian – the blood drinking vampire =-.
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 =-.
This is really effective way of learning CSS. So thanks for this great help.
i just needed some body that will help me creat a blogg.
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?
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? =-.
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
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.
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
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.
thank you Lisa,
If I would have known believe me I would have. Thank you Lisa for all your help. You are awesome!! 😉
Eddie
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. 🙂
Wow I have around 500 pages I am going to have to do each one separately?
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.
Okay I understand now but I will not loose all my existing block by block built pages when I transition to html will I ?
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.
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.
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.
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
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).
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
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.
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
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
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
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.
It’s very useful CSS tips for blog. so i can use it.
thanks
and it is too informative.
http://www.sleekinfo.com
Really too good info on css templates.
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
thank u very much
i will learn it 🙂
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
Thanks Lisa,
I didn’t read the transition guidelines yet.
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.
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 🙂
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
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! 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!
Awesome!!
thank you for providing us with this.
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
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
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.
totally dig your site! keep up with the fantastic work! cheers~
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.