Welcome! Here is a quick, basic, easy tutorial I wrote on CSS layout and it's advantages. I hope it helps someone. (I aim this at new commers that want to learn to make sick layouts like my own ;-) I expect that you know basic HTML and how to create a .css file.

Cascading Style Sheets control everything from font style, color and size to text positioning, background color and much more. The power behind CSS is that you can have "blocks" of text, for example, that all have a "style." Instead of using the now outdated tag you would create a CSS style named: .red and simply call that style in a paragraph tag:

i.e.: -> CONTENT

With ONE site wide CSS document you can edit ANY aspect on the fly, one time and have site wide affect. CSS can also change the effect of entire tags like the tag for example. The tag controls many aspects of the HTML page. Not only background color but also page font options (and more). Instead of placing the SAME tag over and over in several pages you can simply set the style for the body element within the CSS document and save yourself the risk of making a mistake with many edits.

For Example, If you place:



... within your CSS file, every page created with that CSS file will have a white background, font-family Geneva, Arial, Helvetica, sans-serif; and 11px font size-- et cetera, et cetera-- Pretty much all tags can be edited like this. You can also create your own tags ...


The div tags control position and layout for the site.

When I put a div tag like: (in my HTML document)



I am calling this code from the CSS document:


With margin attributes I can set any element (images, text, anything) at any position on the page. The above example puts the content, within the div tag, 180px from the left side of the window. There are many different margin/positioning options available to CSS. (Dreamweaver has an easy to use interface for editing such div tags [in the edit style window])

Page layout example controlled by CSS:

I know that a lot of beginning web designers want to know how to get their content to be in a sleek layout like the site your looking at (;-P) Atleast I did. Here is the basics... Read it a few times and screw around.

A page normally consists of several distinct body parts:

#A page holder. This may be a CSS border or a background image that gives the page a feeling of containment.
#Header containing title and any graphics
#Menu Options
#Main Content
#Footer containing copyright information, etc.


Like the name implies, Cascading Style Sheets do cascade down the page and have a downhill affect on other styles and what ones get priority. To get the layout we want, we are going to use div tags. For div tags, it's pretty straight forward. Here's an example of a few div tags that might be used to position and organize the above body parts.



Obviously the above would go into the actual HTML page and not the CSS document. (Since we are calling those styles from the CSS document.)
I could go in-depth into setting the different attributes of each div style in the actual CSS document but that's half the fun. Just so you know, a div ID tag is defined by the hash (#) symbol. So an ID style IN CSS looks like:



You could then call that with:



So on and so forth...There are a lot of sites that explain all the different attributes and options available. (Dreamweaver also has tag info in the app)

Anyway, I hope that helps a little. Once you have an idea down of what you want the container to look like and where the main content where go, the site will go quickly. (As far as content deployment ;-P)

Have fun.