Structuring your pages <div> IDs and Classes

Divide your page into logical sections using DIV elements. DIV elements are Block level and have no inherent style. You style them using IDs or Classes. Put your DIVs in the order they should appear, as if there is no CSS.

What is the difference between IDs and Classes?

IDs

More powerful than a class.

It is written in the style sheet like this #namehere

Only one instance of an ID can be on each page.

Identify a unique piece of your page's markup—like the navigation—that you will style with specific set of CSS rules

How it look in the CSS

#ltitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 16px;
font-weight: bold;
color: #FFFFFF;
background-color: #A1C9A2;
text-align: left;
position: static;
width: 595px;
margin-left: 200px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
}

How it looks in the XHTML

<div id="ltitle">Layout and Positioning </div>

Classes

To identify a number of paragraphs that all need the same styling use a class. Classes are written like this: .classname

Classes can appear multile times in the same page.

Don't go crazy with classes or IDs. More on this later.

The Box Model

Every element is surrounded by an invisible box. You have to deal with padding, margins, content area, and border.

Let's Review Positioning

Three kinds: Static, Absolute and Relative

Static Position

This is the default. Elements will appear in the order they appear in your XHTML . Here is an example.

Element One

Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she's one lady who knows how to take care of herself. By the way, my name is Max. I take care of both of them, which ain't easy, 'cause when they met it was MURDER!

Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.

I never spend much time in school but I taught ladies plenty. It's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine.

Relative Position

WILL NOT remove an element from the document flow. Based on the element's starting position, a relative position will offset it and LEAVE A HOLE that the other elements must negotiate. The IMAGE is positioned 50 pixels down, and 50 pixels from the left FROM ITS ORIGINAL POSITION.

Element One

Absolute Positioning

Removes the element out of the document flow and DOESN'T INFLUENCE THE ELEMENTS AROUND IT.

The element is positioned relative to the NEARESR POSITIONED ANCESTOR or TO THE <BODY>