レイアウトが出来た所で、画面のキャプチャを見てみましょう。現在こうなっています。

後は、各々の要素を、完成図に近付けていくだけです。早速スタイル指定をしていきましょう！

まずは、見出しであるh3です。
ここを見てみると、文字サイズが大きく、各ブラウザ間でもサイズの差がありますので、フォントのサイズ指定をする必要がありそうです。左側につけるハートのアイコン画像も用意しましょう。

フォントサイズの指定はfont-sizeプロパティ、背景の指定はbackgroundプロパティで指定します。CSSはこうなります。

font-sizeプロパティ

CSSで文字のサイズを何も指定しない場合、一部を除いて16pxがデフォルト値です。ですので、100%を指定すると16pxなのですが、この「px」でサイズ指定をした場合、IEではユーザー側でフォントサイズを変更する事が出来ず、アクセシビリティの点で問題がある事から、サイズ指定は「%」に代表される相対指定が一般的です。

相対指定では他にも「em」や「ex」がありますが、IEでのバグが報告されていますので、問題の少ない「%」をお勧めします。(小さいサイズでは%表示にもバグがあるようですが・・)

今回はbodyタグに基本となるフォントサイズを、80%と指定しています。

デフォルト16pxの8割なので、12.8、これを四捨五入して13pxの指定となります。
基本となるサイズが13pxで、今回のh3に100%指定しているので、h3も13pxの指定、つまり文章と同じサイズになるように指定をしました。h3にはもともと太字のスタイルがかかっていますので、13pxの太字で表示されるという事になります。

backgroundプロパティ

backgroundプロパティは背景を指定するプロパティです。背景には、色々と指定出来る事が用意されており、まとめて指定したい場合に使用します。指定できるのは以下の通りです。

背景色、画像の指定、繰り返しの有無と方向、固定の有無、画像の位置

これらは順番は自由、必要のない物は省略できます(その場合はデフォルト値が指定されます)。ですが、間違いを防ぐために、順番のルールは、自分で持っていた方が良いでしょう。

また、これらを一つずつ指定する事も出来ます。例えば、背景に色をつけたい場合、他の指定は必要なければ、

background-color:#f63;

とした方が、視覚的にも解りやすいでしょう。詳しくは[2] TAG index等のリファレンスをご覧ください。

今回はハートのアイコン画像を指定して、繰り返しはせず(デフォルト値はrepeat、つまり繰り返しありです。)、画像の位置は横方向で左、縦方向で中央という指定です。

画像を指定すると、画像と文字とがぶつかってしまうので、画像の分、余白を取って左にずらす事にします。また、上下も詰まった印象を与えるので、少し間隔をとりましょう。

準備編でもお伝えした通り、padding指定された領域には背景がつきますので、今回の余白はpaddingで間隔をとります。

随分、完成図に近くなってきました！もう一息です。

borderプロパティ

次にtableタグのスタイルをつけていきましょう。
まずは、枠線をつけます。オレンジ色の枠線がtable全体を囲っています。

今回のCSSはこうなります。このままでは幅が狭いので、width指定もつけました。

borderプロパティは、先ほどのbackgroundプロパティと同じく、複数指定できる枠線の指定をまとめて行う場合に使用します。指定できるのは、

「太さ、色、スタイル」です。

各々のデフォルトは「medium 、指定する要素の色、none（なし）」です。今回は、「太さ1px、オレンジ、実線」の指定です。
このborderプロパティは、上下左右、個別に指定も出来ます。実に様々なスタイルが用意されていますので、サンプルなどを参考に、自由にデザインしてみて下さい！（しかし、ブラウザ間で表示に差が出ますので、主要ブラウザでのチェックをお忘れなく。）

次にcaptionのスタイルを指定しましょう。captionタグはテーブルの見出しという意味でした。色をオレンジに、太字にして、左に寄せましょう。CSSはこうなります。

colorプロパティ

フォントの色なので、font-color:と書きたいところですが、フォント色の指定は「color:」と書きます。間違いやすいので気を付けて下さい。
colorプロパティに色を指定する代表的な方法は、「カラーネーム」と「カラーコード」があります。

• カラーネーム：
  色の名前で指定できます。147色あり、それ以外の名前では指定できません。例）black
• カラーコード：
  赤、緑、青の3色を16進数で表した物。16,777,216色指定できます。例）#000000

カラーコードを、「赤・緑・青」を表す数字に分け、各々が同じ場合、一つに省略できます。

#00ffffの場合、00とffとffに分解、0ffに省略出来る事になります。

ですから今回の指定は、#ff6633と同じ意味になります。

ちなみに、この省略が出来る色は、Webセーフカラーです。
現在では、Webセーフカラーにこだわる必要はないとされていますが、携帯電話用や、全ての環境で同じ色表示であって欲しい時は、ここから選ぶと安心です。

text-alignプロパティ

デフォルトの指定では、キャプションは中央ぞろえになっています。ここでは左に寄せたいので、text-alignプロパティを使いました。

text-alignプロパティは、

ブロック要素の内容(テキスト、画像などのインライン要素)

の配置を決めるプロパティです。あくまでも中身だけです。
指定できるのは、左揃え(left)、中央ぞろえ(center)、右揃え(right)です。

IEのバグに注意！

IEでは、このtext-alignプロパティを使って、ブロック要素の配置制御が出来てしまいます。そのため、他のブラウザでテストを行わなかった場合等、意図しないデザインになっている事がよくあります。
あくまでもバグですので、ブロック要素の配置を決める場合は、余白(marginプロパティ)で制御するようにして下さい。IEが次のバージョンでバグを直すと、CSSも変更しなくてはいけない事になってしまい、無駄が生じます。

さあ、あと一息です。テーブルのthに幅を指定して、読みやすい表に仕上げましょう！

幅を指定して、左揃え、余白も指定しました。
出来上がりです！

最終的なCSSとHTMLファイルはこうなりました。

CSS：

HTMLファイル：