Class 2 > Divs

Division tag <div>

Syntax of the Tag

The division tag is used in two ways - either just to divide up the content logically so that styling is effective, or in order to control physical placement on the page. We will not look at this second use in much detail until next week. For now know that it has no default look on it's own - it's invisible to the user unless styles are applied.

<div class="xxxxx" id="yyyyy"> content here </div>

and of course class and id are optional, but one or the other needs to be used to make the tag useful for styling. Remember that the same class can be applied to many elements, but id is unique to one element.

HTML example

<div id="introduction"> content goes here </div>

CSS example

      #introduction {
         margin: 10px 10px 10px 10px;
         color: blue;
         background: yellow;
      }

Result - see html and css

Using the tag

The div tag is one of the most important tags for being able to apply dramatically different looks to a page quickly and easily. The div is at the root of the css Zen Garden. In order to make this kind of transformation possible, it is important to:

• understand and organize your content
• place each different content area into a div tag
• set a class or unique id for each of the divs
• style each id or class in the css file

If you organize your content logically, then you shouldn't have to restructure the html just because you want a new look.

Using Divs as Layers or Positionable elements

Using CSS you can set the absolute or relative position of something in 3 dimensions. Yes - three - things can be set on top of each other. (Granted, the third dimension is still rather thin!). We will investigate this further when we get to css layouts.