Getting Started: a how to on basic XHTML + CSS layout

CSS. Now you’re in for a ride. Ok, Cascading Style Sheets, the name is dumb, like many internet technologies with acronyms. CSS is cool, not perfect, but better than styling things with HTML 4 element attributes. If you’ve done a little OOP (object oriented programming) it’s kinda like that.
CSS tries to “separate the presentation from the structure” of the HTML/XHTML document. And for basics, it does this quite well. But to achieve the really cool looking web 2.0 style sites with rounded corners, and nifty plasticy stuff, well, you’re going to end up breaking that rule. It means using 4 things in XHTML a lot, and forgetting about a lot of other tags/elements and their attributes. The 4 things are:

• <div> elements
• <span> elements
• id attributes
• class attributes

The more you learn about CSS techniques, the more you find yourself using these four things again and again.
Start learning CSS with a static web site that does not provide random stuff served up via PHP or some other scripting language. This allows you to focus first on styling text and layout. I always find CSS layout to be the biggest bugger. It’s real easy to get confused or overly complicated with something simple. After you’ve got a handle on the basic appearance stylings, like color, background-color, border, padding, margin etc… then you are ready for the layout monster.

I’m not going to cover the basics, that’s been done to death, and you should get that from a good book or 3. I’m also not going to cover the advanced techniques, those too are done to death. Rather, let’s focus on basic layout. It’s a kind of middle stage that is often skipped over or covered briefly in books. Learn the basics, tinker with the advanced techniques in tutorials, so you understand them. Then bring those two extremes together in mind with the overall layout.

CSS layouts deserve time and dedication. This is where XHTML and CSS are no longer separated, but deeply connected. There are lots of different styles/techniques/methods to layouts with CSS. The problem is that simple layout changes can require massive changes in the XHTML side of things. You have to make sure all those id and span attributes are named right and in the right place, and that your <div>s and other block elements are all in the right place in the XHTML. This means tinkering, back and forth between CSS and XHTML and sometimes hours or days of frustration and confusion.
In fact, if you find yourself stuck, unable to get something to work right, take a break. Comments in your XHTML and CSS will help you, but sometimes they also make it tough to visualize everything. This is where you need to start thinking about a web page in parts. Break it down.
Sit down with a pen and do a little sketch of boxes and make notes about what you want. Then do a rough version in photoshop, or illustrator or something like that. Now you have a reference and a plan to keep you on track. It can be hard to do this in the beginning, because you want to try everything. That’s ok, but anticipate a lot of changes meaning a lot of work. Changing colors or graphics is easy. Changing layouts is a lot more work.
Start thinking of your site in a general page layout way.

• header or logo area at the top
• main content area in the middle
• footer or logo area at the bottom

What is that wrapper? That is usually invisible in a web browser but is used for layout on most sites. This boils down to having 4 important <div> elements for layout, each with respective id attributes.
You should have these in your XHTML:
• <div id="wrapper">
• <div id="header">
• </div>
• <div id="main-content">
• </div>
• <div id="footer">
• </div>
• </div>

The names given in the id attributes can differ, but you need to keeep them simple and clear and consistent, you’re going to need them in your CSS.
Your CSS should contain a layout section, use comments to boldly divide your CSS declarations into logical sections. It’s easier to find and edit relevant items.
All your id’s will be referred to as #attribute-name as in: #header using the exact value typed in to the id in the XHTML. You don’t have to add the element name, because we are using id attributes which can only refer to one unique element in an XHTML file. So with id, div#main-content is the same as #main-content every time in your CSS.
It’s really too bad that id and class are not declared in XHTML the same way they are referenced in CSS. That would make XHTML easier to read and more logical.

That’s it for now, maybe more next time, but that will clear up what is going on in some books that jump through this too quickly.