デフォルトスタイルのリセットが完了したら、大枠から徐々にスタイルを当てていきます。

全体をセンタリング

全体をセンタリングさせるには、全体を囲っているdiv要素の#pageに、下記のようにwidthプロパティで横幅の指定をし、marginプロパティで左右のマージンをautoと指定します。

この指定は「style.css」の30行目辺りに#pageとコメントが有るのでその直後にスタイルを書くようにします。

/* --------------------------------------------------------
  #page
-------------------------------------------------------- */
#page {
  width: 860px;
  margin: 0 auto;
  text-align: left;
}

これで全体がセンタリングされます。

なお、IE5.xやIE6の互換モードでは、左右マージンの値をautoにしてもセンタリングされませんが、text-align: center;の指定をするとブロックレベル要素がセンタリングされるバグが有り、これを利用してセンタリングさせます。
具体的には、body要素にtext-align: center;の指定をすると、子要素である#pageがセンタリングされます。このままだとテキストもセンタリングされてしまうので、text-align: left;の指定をする事でテキストを左寄せに戻します。
IE5.xやIE6の互換モードは対応ブラウザに含めていないので、別にいいんですが、最低限の対応として一応行っています。（この部分の内容はHTML5でいうとaside要素でマークアップ出来ますね。）

ヘッダーの作成

次はヘッダーに取り掛かります。
ヘッダーのスタイルは「style.css」ではなく「module.css」に書くようにします。

/* --------------------------------------------------------
  #header
-------------------------------------------------------- */
#header {
  margin: 15px 0;
  padding: 15px;
  background: #2e69ab;
  color: #fff;
}

#header h1 {
  font-size: 125%;
}

ヘッダー部分ではデザイン用の指定が有るだけなので、レイアウト関係で特にポイントとなる部分は有りません。
分からないプロパティが有る場合は、「プロパティ」から調べて頂ければと思います。

ここまでのスタイルを適用させると、下記のようになっています。

• ここまでのサンプルを見る

センタリングされ、ヘッダー部分が完成しました。次は、肝となってくる2カラム部分です。