Geoff Hankerson

In our last installment, we started out with good clean semantic and valid xhtml. This sets us up nicely to get started with CSS. To day we will cover these CSS topics:

• Linking to a stylesheet
• Setting the default font size
• Centering the design in the browser window
• Using a background image

Let's get started. Last time the header area of out html document looked like this:

Step One: Semantic HTML

This is part one in a series designed to show you how to go from photoshop mockup to Drupal theme step by step. In the process we will produce a full blown tutorial and a working Drupal theme that we will submit it to the themes repository on drupal.org. If the the tutorial is popular enough - I may even make an on demand print version available.

Good clean, valid xhtml is a must when starting your theme.

Note: there are two common ways to make a theme in Drupal. The first method is to start with stater theme like Zen. Here, most of the Drupal parts are set up but the theme is plain. You work your custom images, colors and CSS into an existing theme until you have it looking good.

An introduction to Regions, Blocks and menus in Drupal 6.

Regardless of what kind of Web development you are doing, you will always need to work with CSS before launching your site. I've been reflecting on best practices in CSS lately. So here is my list of best practices. This is not by any means a complete list or the gold standard for CSS development. This is just what I have learned so far (although I doubt many would find any of these statements controversial). Feel free to add your ideas in the comments.

Drupal 6 was released this last week. I've been checking it out through the betas and release candidate releases. Its a soid release with something for everyone.

Developers get under the hood improvements like a new streamlined version of the Form API.