CSSの書き方が解った所で、早速コーディングに・・と行きたいのですが、その前にもう少し、下準備が続きます。
ここでは、

１：文字コード（キャラクタセット）の指定

２：CSSのプロパティを初期化

３：基本となるスタイル指定(フォントやボーダー等)

ここまでを、コーディングの下準備と考え、効率の良いコーディングをするためにしっかり準備したいと思います。

１：文字コード（キャラクタセット）の指定

文字コードの説明を始める前に、文章構造を書きこむHTMLファイルを見てみましょう。タイトルやキーワードなどを埋め込む 「metaタグ」というものがあります。

ここはSEO的にも非常に重要な部分ですので、皆様も良くご存じかと思います。さて、このmetaタグには、keywordを指定する種類の物があり、お店の名前や、商品名など、日本語を記述する場合があるかと思います。

この部分の日本語を文字化けさせないで、正しく表示させるためには、日本語を使用しているmetaタグよりも前に、ブラウザにどの文字コードを使用しているのか、明確に教える必要があります。（最近では、ブラウザが自動的に認識し、勝手に表示してくれるようですが、やはり文字コードは指定していた方が良いでしょう。）

文字コードと言えば、代表的なものにShift_JISやEUC－JPなどがありますね。ちなみに、文字コードの名前は大文字、小文字は区別されません。shift_jis、euc-jpでもOKです。

CSSでも、コメント内やプロパティの値に、日本語を使う場合があります。

このような場合、やはり文字コードの宣言をしておかないと、HTMLファイルと同じ事が起こります。
スタイル指定自体が無視される事もありますので、とにかく一番先頭には文字コードの宣言を入れる事をお勧めします。書き方は以下の通りです。

/*と*/で囲まれた部分が、「コメント」です。CSSでは、人間が解りやすいようにメモ書きが出来る事になっています。
何に対するスタイルの指定なのか、どんな目的でこのコードを書いたのか、という事を書いておくと、後に見返した時、便利です。
これでバッチリコメントも書けますね！

２：CSSのプロパティ初期化について

現在、多く使われているブラウザと言えばIEです。
しかしながら、FirefoxやOperaといったブラウザもだんだん需要が増えています。お客様によっては、IE以外のブラウザを使用しているかもしれませんので、出来ればどのブラウザで閲覧しても、同じように表示出来れば良いですね。

所が、ブラウザによって、CSSのプロパティのデフォルト値(初期値)が違うため（bodyタグやリスト要素など）、同じ記述をしても違う表示結果になってしまう事があります。全ての初期値を把握し、ブラウザ毎のCSSを書かなくてはいけない・・となると現実的ではありませんので、

一旦、全てのセレクタで問題となるプロパティを初期化してしまうと、簡単です。

デフォルト値を上書きしてしまい、全てのブラウザで同じ値(ここでは0)に書き変えるという考え方です。

上記の文章で、セレクタに「*」が指定されています。これは、全称セレクタと呼ばれ、全ての要素にスタイルを指定する事が出来ます。
ユニバーサルセレクタとも呼ばれます。

これで、余白関連のプロパティの値をリセット出来ました。全称セレクタは一番優先順位が低くなっていますので、改めて余白を指定してやると、上書きされる仕組みになります。

次のページでは、混同しやすいmarginとpaddingについて、もう少し解説します。

余白って上下左右、４ヶ所あるはずだけど？

marginプロパティは、上下左右に値をセット出来ます。上だけに設定したい場合は、margin-top:10px;、下はmargin-bottom:10px;といった感じです。
しかし上下左右に4回同じ事を書くのは面倒なので、全て同じ場合は、まとめてmargin:10px;と書くことが出来ます。

これで上下左右ともに10pxの余白を取ります。（0の場合は単位は省略できます。）
※上下10px、左右はバラバラの場合や、上下10px、左右20pxの場合の書き方もあります。詳しくは[4] tagindexで調べてみて下さい！

所でこのmarginとpadding。少し大雑把に「余白関連」という表現をしましたが、どのような違いがあるかご存じでしょうか。
言葉にすると

margin　⇒　指定した要素の外側の余白。背景は表示されない。常に透明。
padding　⇒　指定した要素の内側の余白。背景が表示される。

こうなります。divに代表されるボックスの構造で、非常に重要な違いとなりますので、図で確認してみて下さい。

実際の表示はこちら(margin:20px、padding:20px、border:solid black 5ｐｘ、背景に#d9ecffを指定した場合です。)どこがpaddingになりますか？

ここは文章等が入るスペースになります。この場合は<p>が適当ですね。<p>のボックスはテキストを表示する領域と、パディング(内側余白)、ボーダー(枠線)、マージン(外側余白)で構成されています。

３：基本となるスタイル指定(フォントやボーダー等)

先ほど、ブラウザ間の表示のずれを無くすため、一旦デフォルト値をリセットしましたが、この目的以外にも初期化しておくと良いものがあります。
普段、よく使うプロパティの値があれば、最初に上書きしておけば、後から何回も記述する必要がなくなります。

例えばimgタグのborderプロパティの値は、枠線を出さなければ「0」で固定して問題ありません。（img{ border:0; }）

そこで、今回は、全体で使うフォントの種類とサイズを初期化しておきましょう。
ついでといっては何ですが、先ほど全ての余白をリセットしたので、上下左右の間隔が詰まってしまいます。余白の設定もしておきましょう。

これで、下準備は整いました！お疲れ様でした。CSSはこうなります。