review

Joss Whedon makes an interesting career choice. Cast: Joss Whedon!!! T-shirt store: britanick.spreadshirt.com Director of Photography: Danny Grunes Matt McBrayer Song: ‘Safari’ by Teen Girl Scientist Monthly

CSS Columns Tutorial

Cascading Style Sheets or CSS is a computer language that can be used in conjunction with HTML to expand on the design possibilities when designing a web site.  Using this CSS columns tutorial will teach you how to create columns by outlining the styling features of outer containers or several inner containers.

Here are the simple steps you need to follow with this CSS columns tutorial:

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

2. After your title tags, press enters and go down one line and create a new line. Then type this <style type=”text/css”> and press enter.  Now you will have a spot to define DIV’s that are added to the HTML code as outlined in the next steps.

3. Next you will need to type this: “#wrap{width:600px;}, hit enter. Now you have defined a container called wrap and sets 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. They 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.  Now you have a container filled with text in the 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: <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 earlier. It will determine the size of the background color, etc.

10. Save the document.

11. Next, click on the view tab to see what you have just created. You should see two columns with text in each. The columns should be right next to each other.

Now that you have an idea of how to create columns in CSS you can make whatever changes to the sizes and text you want to make. It is totally customizable.

I hope this CSS column tutorial has helped you get a better understanding of CSS and what it can allow you to do when you are creating a web page. It is flexible and allows you more customization once you learn how to use it.