You’ve chosen your DOCTYPE and created the head of your XHTML document, with keyword-rich title and meta description tags, the meta charset tag, and a link to the style sheet. Now you’re ready to create the visible part of your document.

Just as search engine optimization and web development go hand in hand, so do XHTML and CSS. Separating style from presentation is crucial for SEO - the less markup a search engine bot has to crawl through, the faster it gets to and indexes your content. The time saved is negligible in human terms, but there are millions of web pages out there competing with you - if you’re smart, you’ll make it easy for a hungry bot to find what it craves: content.

You could also embed style into your document tags, or put the CSS in the head of your document, but that kind of defeats the purpose. It’s much easier to have a separate stylesheet - you’ll only have one file to change if you make an update to a font, color, background, or position of an element.

I always start with this:


* {
margin: 0;
padding: 0;
}


This removes any default padding and margins your browser might apply. You can apply margins and padding to each individual element, and it makes it easier to achieve cross-browser loveliness!

Use absolute positioning to get your content as near to the top of your document as possible. There are no end to the choice of layouts you can create using CSS. An excellent example can be found at The Layout Reservoir at www.bluerobot.com. Follow the link and view the source of the page.

One thing that I do differently - I use the <link> tag to link the stylesheet to avoid “FOUC” - which stands for Flash of Unstyled Content. When you use the import css as they have done, and a user first visits the page, sometimes they’ll get a split-second view of the unstyled page, which is definitely not what you want.