このページでは、このHPに用いられているスタイルシート（以下CSS）に関する説明をする。ページの装飾は全て外部スタイルシートを用いて指定しているため、 htmlソースを非常にきれいに書くことができる。

はじめに、ページ全体に対する設定を行うため、 と記述する。これによりbody全体のフォントサイズと、この画面の左側を見ればわかるとおり、左側の画面の余白部分を指定することができる。 また、em, pxというのはそれぞれ単位を表す。

CSSでは、クラス名を用いてスタイルを指定することができる。 上のように記述することで、クラス名subbody（自分で名前を決めてよい）を用いてスタイルを指定することができる。 使い方は、html中でスタイルを用いたいタグの後でクラス名を指定すればよい。 このように書くことで、クラス名で指定された装飾がそのタグ（ここではdiv）に適用される。

画像を表示する場合、次のように記述することで画像の周囲の枠線の太さを指定することができる。 :のあとにnoneと入力することで、枠線を非表示にすることができる。 また、同じようにheightやwidthを指定することで、その画像の縦、横の長さを変えることができる。

リンクを指定する場合、CSSを用いることで「リンクにマウスカーソルが重なったとき」、「一度訪れたことがあるリンク先」などのように個別にリンクの装飾を設定することができる。 最初の行でtext-decoration:noneと指定することで下線を非表示にしている。これにより全てのリンク先の下線は表示されなくなる。 次の行のa:linkは通常のリンクの装飾を行う。ここでは文字の色を灰色に変えている。#の後ろに16進数の数字を記述することで、その数字が表す色を指定することができる。 a:vixitedはアクセス済みのリンクの装飾を行い、a:hoverはマウスカーソルが重なったときの装飾を指定できる。ここでは、色を変えるとともに下線を表示するように指定している。 a:activeはクリックした瞬間の装飾を表す。

このＨＰでは、文字を装飾する場合は下記のようなCSSを用いている。 最初の行は文字のサイズを指定する記述である。次のfloat: rightは、ボックスを左か右に寄せ、逆側に文字を回り込ませることができるプロパティである。 この文字の回りこみを解除したいときは、次の行のclearプロパティを用いる。bothと記述することで左と右両方の回りこみを解除することができる。 次のcolorは文字の色を変えるプロパティである。最後のtext-indentはその名の通りインデントを指定するプロパティで、ここでは1emという長さのインデントを指定している。 text-align: center;はテキストを左右の丁度真ん中に置くプロパティであり、centerの他にleftとrightがある。次の行は文字と文字の間の長さを指定するプロパティで、 ここでは3pxと指定している。

このHPでは、ボックスに対して下記のようなCSSを用いている。 margin-left:10pxはボックスの外側の左側の余白を指定し、padding-top: 10px;はボックスの内側の余白の上側の余白を指定するプロパティである。 height、widthはボックスの縦、横の長さを指定するプロパティで、指定方法にはpxのように単位を用いたり、%で割合を指定する方法と、auto（デフォルト）で自動調整にすることもできる。 background-color: #e6e6e6;はボックス内の背景の色を指定するプロパティである。

このHPでは、テーブルに対して下記のようなCSSを用いている。 border: 1pxはテーブルの線の太さを1にする指定で、vertical-align:middleはセル内の文字の縦横の位置を中心に設定できる。 width（height）はそのテーブル（セルなども）などの横幅（縦幅）を指定できるプロパティである。最後のbackground-color:はテーブル （セルなども）内の背景色を指定するプロパティである。