How to Design My Web Site With CSS

Web design has come a long way in the past few years, and the good old standby of tables is no longer the accepted way to layout a web site. Though the look is still desired, browsers are more often not reading tables--or worse--they are reading them incorrectly. It is better to use Cascading Style Sheets (CSS).

Almost any web site can be adapted to the 3 column site, which is the one we lay out in this article. You can then add a navigation bar and other items simply by defining them and their placement on the page. Read on to learn how to lay out a 3 column page in CSS.

Difficulty: Challenging

Instructions

1. Open a text editor document and save it as mystyle.css.

2. Set the margin and padding of the body element with the following code. Because some browsers do not default to zero, they must be physically set. Color must also be set for the same basic reason that not all browsers default to white. What follows is the CSS code for the beginning of the page: html,body{margin:0;padding:0;background:#FFF}.

3. Next, set the size for the body text. The code for this example is: body{font: 76% arial,sans-serif}.

4. The next command sets the paragraph margin: p{margin:0 10px 10px}.

5. The next command will give the page its container or main section, inside of which you put all of the other pieces of your page.This example uses the following code: div#container{width:1024px;height:1800px;margin:0 auto}.

6. On the left hand side of the navigation bar, add a division. The code is as follows: div#navigation{float:left;width:250px;height:100%}.
   

7. Now let's define the content section of the page. This is the middle section of the page where you add your main content: div#content{float:left;width:700px;height:1500px}.
   

8. For the right hand column, you add code similar to this: div#extra{float:right;width:250px;height:1500px}.

9. Adding headers and footers are handled in the same manner. The footer code for this page would be div#footer{clear:all;width:1020px;height:300px}. Add a header to the page that allows for your logo. The code for this header is: div#header h1{height:80px;line-height:80px;margin:0;
   padding-left:10px;background: #EEE;color: #79B30B}.
   

10. Within the CSS file you should also define your header fonts. They are denoted as h1{color:#ff0000;height:80px;line-height:80px;}; h2 through h6 can also be defined (this code defines the color as well as the height of the font).

11. Save this document and reference it in your html document to pull the styles into your website.
    

Tips & Warnings

• CSS will make changing things such as colors and fonts on all pages easy and quick.
• If you are working with a purchased template, you will have been furnished with a style sheet that you can modify.
• All code above is sample code. Modify the code to fit your unique web site dimensions. That is, things such as colors, heights and widths will be different based on your own preferences.
• If you are modifying a style sheet versus building from scratch, make a backup copy of the original before editing.