Writing a Well-Formatted Document

Now it's time to contain this monster. The first thing you'll notice is that we will be creating this document without using tables. Yeah, there's a bunch of back and forth going on about whether or not to use tables. Yes, there are specific reasons to use tables such as small calendar widgets, column listings (until CSS 3) but the container of the document should never use tables. Why you ask? Well aren't you a curious little bunny. It's simple, there are three layers to this thing we call the interweb.

1. Presentation Layer: How the document is layed out and branded
2. Application Layer: All the little goodies that make your website dynamic
3. Data Layer: Basically a database where all content is stored

You should really keep all these layers separate when developing any types of applications, kiosks, websites, etc. Let's say you've locked your content into tables and a user wants to check it out using their phone. Well, those columns will still lay side-by-side more than likely extending the content far to the right with that nasty side-to-side scrollbar.

Without tables, the columns will stack upon each other making it readable on any device plus you can style it specificly for that device using alternative stylesheets. If you know someone who disagrees and wants to fight, you can find me in Washington Square park sleeping on a park bench around the southwest side.

The first step is to add a stylesheet to our document. I'm not going to get far into the basics of cascading style sheets (CSS) so if you need to brush up in this area, you can head to http://www.w3schools.com/css/. With that said, drop the stylesheet tags into your document. This tag should go under the title tag and within the head tags...

Time to center the page using the "body" selector, "text-align" property and "center" as it's value...

Let's take a peak. Oh snap, that's ugly and all the text has centered as well. Time to fix that. We need to wrap a container around all of the content including the title, menu, heading, content and footer. Start by adding the <div> tag above the <h1> tag and close it by adding </div> below the closing </p> tag of the footer.

Still with me? Now let's tame this beast using the "ID" selector to style the <div> tag. You may be thinking why not use the "class" selector. There's a ton of different reasons to use either of them but my basic rule is if I'm going to use a selector for one tag or structural elements I stick with the "ID" selector. When it comes to adding cosmetics, different colors or using the selector for several different tags I use the "class" selector. I'm sure you can find other reasons but that's just my rule. So jump back up to the top of your document and and define a container selector within the style tags:

Then add that ID to the opening <div> tag:

We all good? CSS didn't scare you away yet did it? Good, let's add a size our web page. First we'll define the width of the container. You can either use percentages or pixels to define the width of the container but for now let's use pixels making the width 760.

Now fix the alignment of the text in the container by setting the text alignment left. Using the "margin" selector, re-center the container by adding "auto" to inherit the body selector's text alignment.

Last, to let us see what we are creating a little easier, add a 1 pixel black border around the container.

If everything went well, our document should now look like this. Feel free to download this sample.