Using a CSS Generator is a great way to create your own CSS Layouts. There are a few sites that offer generators that will generate your CSS Code. In this guide, we are going to focus on the IBDJOHN.com website. This site provides an easy generator to use. To visit this site, please click this link. When the page loads, you will see the generator at the bottom of it.

This tutorial will walk you through each step of creating the CSS layout. This is a two part tutorial. In part one of the tutorial, you will learn how to create the top section, also known as the header of your website. The second part of this tutorial will show you how to create the main section and the side columns. The second part will also show you how to insert the code into your website.

Top Section

The Top Section of the generator is the header of your website. In this section you will see the different fields that will need filling in for the header part of your website. Let?s take a look at the different fields.

Height ? The height is the height of the header. In pixels, you will need to enter the height you want it to be.

Border ? If you want a border around the header, enter the size of the border in the border field. If you do not want a border, leave 0 in the field. Normally, border sizes are set at 1 or 2 pixels. The higher the number, the thicker the border.

Color ? The color will be the background color of the header. Enter the color of your choice in this box. You can get the colors from here. http://www.ibdguy.com/colors.shtml That page will provide you with colors and the name or code for the colors.

Banner Image ? If you want a banner or graphic to be in the header, this is where you would add it. You will need to enter the url in this field. Delete the url that is in the field and replace it with your url. Make sure your image is uploaded first. You will need to url from the image.

Width ? The width is the width of the banner. Find out the width of your banner or graphic and enter it in this field. Enter the size in pixels.

Please see part two of this tutorial to continue using the generator. Part two of this tutorial will show you how to create the left and right columns and the main section. Part two will also show you how to add it to your website.