CSS Primer: The DIV Tag

Now that we've touched on why CSS is well suited for website design and layout, I'd like to start to talk about how it gets pieced together by looking at a few of the elements that go into using CSS.

The DIV tag is the core building block of using CSS within your HTML code. While some people familiar with using tables for layout relate it to a table cell, it can more accurately be referenced as a box. Just like a cardboard box, they can come in all kinds of sizes, and can be arranged to be inside one another or besides one another.

To continue the analogy, filling in your web page with DIV tags becomes a lot like packing a moving van with boxes. You have to find places for the big stuff and the little stuff. You also need to tie off some things so they stay where you want them. And here's where the CSS becomes involved.

What CSS then allows us to do is to give different attributes to our DIV boxes. Using CSS, we can specify the style of our box (size, location, appearance, alignment, etc.). This is done in one of three ways in a DIV Tag:

1. Through The Class Attribute - The Class attribute is used to apply a style to multiple DIVs. For example, in a blog you probably want all the postings to be displayed similarly in distinct boxes. Using the Class attribute allows you to apply the same style to each of them.
2. Through The ID Attribute - The ID attribute is used to apply a style to a single object. For example, if you wanted two distinct columns on your page, you can make one with an ID="right" and one with an ID="left", and set their styles to make them appear as you wish. This styles would then not be reused on a given page.
3. Through The Style Attribute - The Style attribute allows you to modify the style on a single DIV object. Using the Style attribute is not recommended in general "best practices", but there are cases when it may be needed.

If you haven't worked much with DIVs, at this point you may still be wondering what the benefit of using the tags are. Next time we'll start to talk about all the fun style changes we can make to DIVs using CSS, and the big picture should really begin to develop. See you then!