CSSの書き方をすぐにでも知りたいところでしょうが、その前に勉強してほしいことがいくつかあります。まずCSSの基本的なお約束に目を通してください。
HTML4.01Strictでは、3種類のCSS記述が可能です。
お勧めの方法です。
外部CSSファイルはテキストファイルですからNotepadやemacsなどを用いて直接編集できます。ただし拡張子を.cssとすることをお忘れなく。
CSSは基本的に以下の書式で記述します
セレクタ {プロパティ:値; プロパティ:値; ……} /* コメント */
セレクタ {プロパティ:値; プロパティ:値; ……}だけを必要な数だけ記述すればよく、HTMLと比較して記述のルールは非常に簡単です。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML文書タイトル</title>
<link rel="stylesheet" type="text/css" href="＊＊＊.css" charset="Shift_JIS" media="screen,tv" title="CSSタイトル">
</head>
<body>
略
</body>
</html>
link要素による外部CSSファイルの参照をもう少し詳しく見ていきましょう。
text/cssと指定します。HTML文書にはCSS以外のスタイルシートも適用できます。したがって、スタイルシートの種類がCSSであることを明記する必要があるのです。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML文書タイトル</title>
<style type="text/css">
<!-- セレクタ {プロパティ:値;} /* コメント */ -->
</style>
</head>
<body>
略
</body>
</html>
text/cssと指定します。HTML文書にはCSS以外のスタイルシートも適用できます。したがって、スタイルシートの種類がCSSであることを明記する必要があるのです。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css;">
<title>HTML文書タイトル</title>
</head>
<body>
<任意のタグstyle="プロパティ:値; プロパティ:値; ……">＊＊＊</任意のタグ>
</body>
</html>
セレクタは、要素名、クラス名、ID名などで、アルファベットで始まり、アルファベット、数字、ハイフンのみで構成された名前を指定します。
セレクタに要素名を指定します。*が指定された時は、全要素に適用されます。
* {line-height:1.4em;}
body {background:url(xxx. gif);}
セレクタに.をつけてclass属性値で指定します。
.dog {color:red; text-align:center;} /* class属性値がdogのあらゆる要素に適用 */
h2.dog {color:red; text-align:center;} /* class属性値がdogのh2要素のみに適用 */
セレクタに#をつけてid属性値で指定します。
#dog {color:red; text-align:center;} /* id属性値がdogのあらゆる要素に適用 */
h2#dog {color:red; text-align:center;} /* id属性値がdogのh2要素のみに適用 */
セレクタに要素名[属性名]、要素名[属性名="属性値"]、要素名[属性名~="属性値"]、要素名[属性名|="属性値"]を指定して適用できます。
h1[title] {color:blue;}
span[class="example"] {color:blue;} /* 指定属性値を使用している該当要素へ適用 */
a[rel~="copyright"]{color:blue;}
*[lang|="en"] {color:red } /* lang属性に「en」で始まる値を持つ要素……すなわち「en」「en-US」「en-cockney」などにマッチする*/
よく使われるのがリンクの装飾としての:link，:visited，:hover，:activeでしょうか。なお、同じ要素に左記の擬似クラスを指定する場合、左記の順番を守るようにしましょう。一般→特殊の順が基本です。スタイルの継承を参照のこと。
疑似要素とは、文書中に規則性を持つもので、あえてマークアップしなくてもよく、自動処理が望ましいもの……なんですが、CSSで便利に使えることが少なくありません。
セレクタをスペースで区切って２つ並べると子孫セレクタになります。これは、左側の要素内にある右側の要素すべてにスタイルが適用されます。
h1 em {font-weight:bold;}
セレクタを>で区切って２つ並べると子供セレクタになります。
これは、左側の要素内にある右側の子要素にスタイルが適用されます。
body>p {text-align:center;}
セレクタを+で区切って２つ並べると隣接セレクタになります。
これは、左側の要素と右側の要素が同じ親を持ち、左側の要素の直後の右側の要素に適用されます。
h1+h2 {color:red;}
セレクタを,で区切って２つ以上並べると複数セレクタになります。
これは、複数のセレクタに対して一度に同じスタイルを設定できます。
h1,h2 {color:red;}
CSSの適用方法は多岐にわたるため、「あるセレクタが、同じプロパティについて、異なる値を指定される」場合があります。このときCSSは以下のルールに従って適用されます。
親要素に指定されたプロパティは、基本的に子要素に継承されます。もし継承されない場合は、「inherit」プロパティを指定することにより、強制的に値を継承させることができます。
本稿で解説してきたのは、html文書の製作者によるCSSの適用方法です。じつはこの他にブラウザのデフォルトスタイルシートとユーザが指定するユーザスタイルシートがあり、製作者のCSSと競合します。ちなみにWinIE（Ver.5以上）では、ツール→インターネットオプション→ユーザ補助の手順でユーザスタイルシートを指定できます。
競合するスタイルシート適用の優先順位は以下のようになります。
ユーザスタイルシートを指定したとしても、製作者スタイルシートが優先されます。そこでimportantというキーワードが用意されています。製作者スタイルシートでimportant指定しても、ユーザスタイルシートのimportant指定の方が優先され、逆転現象が生じます。
h1 {color:red !important;}
ときどきclass="red"などとされる方がいらっしゃいますが、赤であること自体に意味がある場合以外は避けるべき記述です。デザインの都合で赤という表現方法を選択している場合、リニューアル後には色が変わるかもしれませんよね。リニューアルのたびにclass属性などの値を変更するの無駄な手間です。結果としてのデザインに左右されない、理由による命名をこころがけましょう。
例えば、情熱を表現するために赤による表現をするならば、class="passion"などと命名すればよいでしょう。
id属性値はHTML文書内でユニークな存在でなくてはなりません。つまり、同じid属性値を持った要素が、同一文書中に複数存在してはいけないのです。一見、不便なようですが、このルールのためにid属性値はリンクアンカーの役割を果たします。つまりid属性値の設定された要素には直接リンクできるわけです。本文書では主にページ内移動のためにid属性を利用しています。