CSS Basic Layout Tutorial
is a very good for beginners who want to design their first website using DIV and CSS.
it will teach you following using DIV and CSS.
- How to make a Header.
- How to make a Content Area.
- How to make a Right Side Bar.
- How to make a Footer.
Now We will create 4 DIvs with ids in <body> HTML Tag. These ids will be used in CSS Style sheet for styling.
In style.css file we will set body margin and padding 0. See below code
For referring id we will use # sign. We will set 100% width for header and 50px height and also set background image for header of our wish.
For content we will set 75% width because 25% will be required for right side column. We will set height of 500px. You can choose different height for this according to your requirements.
We also set background color for demo. Float set to left because we need this DIV on the left side.
For right column we will set float right because we want to show it on the right side of the content DIC. It has same height as content DIV. It width will be 25% of the page.
For visibility of demo we set different background color for this.
For footer we will clear both above DIVs and set 100% width. You can also set background color as you like it.
We use cufon fonts in this tutorial because it will look nice. We have included 2 files before the </body> HTML tag.
One file is cufon js and other for caviar-dreams font.
We hope you understand the basic CSS layout tutorial. Please practice it yourself and make better layout using this tutorial.
If you have download the source code, you will copy it in your htdocs or www root folder and then you will try it in browser.
If you do not know about PHP, then you can simply use index.html file which is also available in source code. You can try index.html file without any localhost.
Enjoy it and keep learning. For any query/suggestions please post a comment on our Facebook Page.
- First we will create new php or html file and name it index.php or index.html and write below code in first line for declaring doctype as we are using HTML5.