When developing a web website, cascading Style Sheets or CSS is a computer language that can be utilized in conjunction with HTML to expand on the design possibilities. Utilizing this CSS columns tutorial will teach you how to develop columns by detailing the styling features of external containers or several inner containers.

Here are the easy steps you need to follow with this CSS columns tutorial.

1. Fire up your favored HTML editor program and click on “file” to open a new project. Then choose HTML Document and click the “OK” button.

2. After your title tags, press enter and go down one line and create a new line. Type this

<style type="text/css"> 

and press enter. Now you will have a spot to define DIV’s that is added to the HTML code as outlined in the next steps.

3. Next you will need to type this

#wrap{width:600px;}

and hit enter. Now you have defined a container called wrap and set the size at 600 pixels.

4. Now, type this

#column1 {width:260px;background#c99; float left;}

then press enter. This creates the first column container and sets the width 260 pixels along with a background color. It also sets the column so it floats to the left of the container we just set up.

5. Next, type this

#column2{width:280px:background#9c9:float left:}

then press enter. This will set up another column container and sets the width at 280 pixels. It also sets a background color and sets the column to float to the left side of the container.

The two columns will be added to the main container, or wrap, and will be rendered right next to each other.

6. Next, close the style tag by entering this

</style>

7. Now you can click on the empty line between the body tags and type in this

<div id= 'wrap'>

and press enter. This will create the first part of your main container and it will be named “wrap”.

8. Now type this

div id='column1'> This is the text in column 1. </div>

and press enter. You now have a container filled with text in the very first column you created. The ID property will link the container to the CSS code we created earlier which defines the size, the background color and the location of the column container.

9. Now do the same thing for column 2. Type in this

<div id='column2'> This is the text that will be in column 2. </div>

and press enter. Again, the ID property will link this container to the attributes we created previously. It will identify the size, the back ground color, and so on.

10. Save the document.
11. Next, click on the view tab to see what you have just produced. You ought to see two columns with text in each. The columns ought to be right next to each other.

Now that you have a concept of how to create columns in CSS you can make whatever modifications to the sizes and text you wish to make. It is totally customizable.

I hope this CSS columns tutorial has actually assisted you get a better understanding of CSS and what it can allow you to do when you are developing a web page. It is flexible and allows you more customization once you find out how to utilize it.

CSS Best Sellers