飾りっ気のないサンプルページにスタイルシートを適用し、ゴテゴテと飾ってみます。
まずサンプルページ「car.html」を見てみます。さっぱり色気がありませんが、ここからスタイルシートを使って見栄えを良くしていきましょう。（上記サンプルの画像とHTMLソースをzipで圧縮したものを用意しましたので、よろしければこれを使って実際に書き換えながら読み進めていって下さい。）
ちなみに完成すると以下のようなスタイルになります。
スタイル指定はstyle要素を用いてHTML文書中に直接書いていくことにします。最初にざっとHTMLソースを眺めておいて下さい。
各例のプロパティの部分に「Properties」の対応した項目へのリンクを張っておきますので、各プロパティの詳しい説明はそちらを参照して下さい。
それでは始めましょう。まずは全体の背景色でも変えてみることにしましょう。style要素の内容に以下を記述して下さい。
body{background-color:#cf9}
（書き方については「HTMLでCSSを使うには」と「書き方」を参照して下さい。）
次に、やはりページの見出しを何とかしたいですね。色とフォントを変えて、下線でも引いてみましょう。style要素の内容に以下を追加して下さい。
h1{color:#693;
font-family:Verdana, cursive;
border-style:solid;
border-color:#693;
border-width:0 0 3px 0}
指定したフォントがページ閲覧者の環境に存在しなければ、系統名で指定したものが用いられます。系統名を指定しなかった場合は標準のフォントが用いられます。border-widthにあるように、値が0の時は「px」などの単位を省略できます。
（書き方については「書き方」にある「宣言の複数指定」を参照して下さい。）
見出しに下線を引いたことでhr要素とのバランスがいまいちにみえますので、これを表示しないようにしてみましょう。
hr{display:none}
次に気になるのはテーブルでしょうか。やはり枠も何もないのは見づらいですから、枠をつけることにします。
table{border:ridge 3px #66c066}
th,td{border:solid 1px black}
（書き方については「書き方」にある「複数の要素への適用」を参照して下さい。）
こうして見ると少しせせこましい感じがします。幅も指定してみましょう。
table{width:20em}
余談になりますが、幅の指定と枠の指定はどちらもテーブルに対してのものですので、
table{border:ridge 3px #66c066}
table{width:20em}
とも
table{border:ridge 3px #66c066;
width:20em}
とも書くことが出来ます。
表題の文字がなんだか寂しいので、太字にして右に寄せてみます。また、表本体と少し離れすぎているように感じますので、余白も微調整します。ついでに各項目の背景色も少し変えておきましょう。
table caption{font-weight:700;
text-align:right;
padding-bottom:0.2em}
th,td{background-color:#dfd}
（書き方については「書き方」にある「文脈によるスタイル指定」を参照して下さい。）
どんどん続けて行きましょう。今度は車についての経過説明の部分を弄っていくことにします。
まず、全体の幅を少し狭めてみます。
dl{width:95%}
次に各項目を飾ります。ボーダーを引いて背景色も変えてみます。
dt{border-width:1px 0 1px 0.5em;
border-color:black;
border-style:solid;
background-color:#dfd}
文字とボーダーの間隔が少し詰まり気味ですので、少しだけ間隔をとることにします。
dt{padding:0.1em 0 0 0.2em}
次に本文にスタイルを適用します。日本語の文章らしく、一文字分字下げすることにしましょう。更にマージンを調整して、幅も少し変えてみます。
dd p{text-indent:1em;
margin-top:0.5em;
margin-bottom:0.5em;
width:95%}
元のページに戻るリンク部分も軽く飾りましょう。
div#navi{text-align:right;
font-size:0.9em;
border-top:1px solid black;
padding-top:0.2em;
margin-top:1em}
（書き方については「書き方」にある「class属性とid属性」を参照して下さい。）
リンク部分について、あと少しだけ細工してみましょう。マウスがリンクの上に来ている時と、フォーカスが与えられている時だけ下線を表示するようにします。
a{text-decoration:none}
a:hover{text-decoration:underline}
a:active{text-decoration:underline}
（書き方については「疑似クラスと疑似要素」にある「擬似クラス」を参照して下さい。）
以上で完成なのですが、補足としてもう少し続けたいと思います。
ここまではスタイル指定をstyle要素に書いてきましたが、これを別ファイルに書き出します。
さて、ここにもうひとつのサンプルページを用意しました。
このサンプルページにlink要素で先ほどのexample.cssと連携させると、一瞬で以下のような見かけに変えることができます。
（連携させる方法については、「HTMLでCSSを使うには」を参照して下さい。）
「example.css」を実際に自分のsiteで使う場合には、今までの説明に出てきた要素以外の他の要素（例えばh2要素やh3要素等々、他にも色々と）についてのスタイル指定も書くことになります。
example.cssに幾つかスタイル指定を追加したものが以下のexample2.cssです。
example2.cssを上記のサンプルページに適用すると以下のようになります。
次にexample2.cssとは全く別のスタイルシートを用意します。
これをcar-final.htmlやspec-final.html等にlink要素で連携させれば、HTMLソースに関しては一行書き換えるだけで見かけを大きく変更することが出来るわけです。
このように、スタイルシートを使えばHTMLソースは殆ど変更する必要がなく、スタイルシート自身はいくつものHTMLに適用することができるわけです。
ただ、このようにうまくHTMLとスタイルシートを分けて使うためには、ある程度HTMLを正しく理解していて、スタイルシートも使い慣れている必要があると思いますので、最初のうちはどんどんスタイルシートを使って試行錯誤を続けてみて下さい。
以上で終了です。お疲れ様でした。