HTML文書に組み込むには四通りの方法がありますが、再利用性などを考えると一番上の方法が望ましいとされているようです。複数の方法を使うことも一つの方法を複数回使うことも可能です。また、出力メディアを限定することも可能です。
ただし、@import規則はIE3, NC4が未対応なのであまり実用的ではありません。それと、IE3では、複数のLINK要素やSTYLE要素を挿入するとそれぞれについて一番下しか認識されず、LINK要素とSTYLE要素を組み合わせると、STYLE要素についてはBODY要素のbackground属性くらいしか認識しません。
仮に全部の方法を取り込むとすると、一番下のようになります。通常使われているのはCascading Style Sheets（CSS）ですが、他のスタイルシート言語を使うことも許されているので、style属性を使う場合はContent-Style-Typeを省略出来ないことになっています。
外部ファイルはメモ帳等のエディタで作成するのですが、文書作成者, ユーザーが指定したスタイルシートよりも先にまず適用されるデフォルトスタイルシートのサンプルも提供されています。
<LINK rel="stylesheet" type="text/css" href="xxx.css">
</HEAD>
<!-- 代替スタイルシートを用意することも出来ます -->
<STYLE type="text/css">
<!--
@import url(aaa.css);
@import url("bbb.css");
@import url( ccc.css );
@import url( "ddd.css" );
@import "eee.css"; /* 引用符は省略不可。IE4不可。 */
-->
</STYLE>
</HEAD>
<!-- @の後に空白類文字は不可。セミコロンは省略不可。 -->
<!-- 外部ファイルでも@import規則を使えます -->
<STYLE type="text/css">
<!--
H1 { color: blue } /* 見出し（レベル1）のテキスト色を青 */
-->
</STYLE>
</HEAD>
<H1 style="font-size: 15pt">見出し</H1>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet" type="text/css" href="xxx.css">
<STYLE type="text/css">
<!--
@import url(yyy.css); /* @import規則は必ず先に記述 */
H1 { color: blue }
-->
</STYLE>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
<H1 style="font-size: 15pt">見出し</H1>
※HTMLでは<!--コメント-->ですが、STYLE要素の内容はHTML的な解釈をされないことになっています。つまり、それを知らないUAだけコメント扱いになるという仕掛けなのですが、HTML 3.2でSTYLE要素が予約されていた為か、内容を表示してしまうUAは少ないようです。
※JavaScriptの場合は、「<!--」, 「//」がJavaScriptの単一行コメントであることも同時に利用していますので、書き方は似ていても扱いが少し違います。
<SCRIPT type="text/javascript"> <!-- JavaScriptの場合、ここはコメント // JavaScriptの場合、//が必要 --> </SCRIPT>
規則中には空白類文字（スペース, タブ, 復帰, 行送り, 書式送り）を挿入して良いことになっているので、見やすいように書いてください。全角スペースは空白類文字には含まれません。
クラス, 一意セレクタ（後述）に使える文字は、A-Z, 0-9, ハイフン, アンダースコア（CSS2の正誤表で追加）, ISO 10646の文字コード位置161-255です。ただし、先頭に数字やハイフンは使えません。また、CSSの制御下にない文字列を除いて大文字小文字の区別はありません。CSS1では単バイト符号化方式が前提なので、日本語を含む規則はCSS2を一部でもサポートしていないと反映されないです。
上位互換の為に未知の属性や値は宣言を無視、不正なセレクタはブロック（{ }）ごと無視というルールになっています。
要素とは、開始タグ + 内容 + 終了タグを指しますが、タグが省略可能である場合や、終了タグを省略しなければならない「空要素」もあります。詳細は要素の内容モデルをご覧下さい。
全ての要素にあらゆる属性の属性値が存在するとされていますが、組み合わせによっては効果が得られないともされています。例えば、下の宣言はどれも誤りではありませんが、2番目はたぶん無意味です。一番上は出力空間の背景を設定していることになります。ただし、HTMLとBODYをきちんと区別できるUA（User Agent）は少ないですし、HTML文書ではHTMLに設定が無い場合はBODYに設定した背景を出力空間の背景にすべきとされています。
HTML { background: black }
HEAD { background: red }
BODY { background: yellow;color: black;margin: 1em }
それと、インライン要素に位置揃え（text-align）が無効であるなど、属性の意味からくる制限もあります。
複数のセレクタ（左括弧が出現するまで全体を指す）で同じ宣言を共有する時、コンマで区切ってグループ化することが出来ます。
H1 { color: green } /* セレクタは「H1」 */
H2 {color:green} /* { color: green } → 宣言ブロック */
H3 {
color : red
}
H4{color:red}
H5 { }
H1, H2, H3 { color: green }
H3,H4{color:red}
宣言（属性 : 値）をセミコロンで区切ってグループ化することも可能です。
H1 { font-size: 18pt }
H1 { color: red }
H2 { font-size: 14pt }
H2 { color: blue }
H2 { font-weight: bold }
H1 { font-size: 18pt; color: red; } /*最後のセミコロンは任意*/
H2 {
font-size:14pt;
color : blue ;
font-weight: bold
}
ある要素が要素を内容として含んでいる場合、親要素から子要素へと引き継がれる属性があります。目安としては、継承した方が便利な属性は継承することになっています。
例えば、color属性（テキスト色）が継承しないのであれば、子要素全てのcolor属性について考慮しなければなりません。color属性が継承するお陰で、BODY要素のcolor属性にある値を指定することによって、変更しない限り子要素へと引き継がれていきます。color属性の初期値はUA（User Agent）任せになっているので、指定しなくてもブラウザやユーザーの設定したテキスト色が用いられます。
それぞれの継承の有無については表にY/Nで書いてあります。継承を利用した方がスタイルシートはスッキリするのですが、バグを避けるためにBODY要素ではなくTD, TH要素に指定せざるを得ないといった属性もあります。
要素名を省略すると全要素に有効になります。HTML 4では、要素名（BIG）は大文字小文字が区別されませんが、class属性値（date/Warning）は区別されます。
.date { color: blue } /* 必ずピリオドの直後 */
BIG.warning { font-weight: bold; color: red }
クラスはどんな目的でスタイルを設定しているのか解る名前にした方が良いです。「お知らせ」は特別目立つようにしたいけど、適当な要素が見当たらないといった場合にクラスを作るのであって、「大きくしたい」とか「青くしたい」のように見栄えから入るのであれば、FONTのように文書作成者しか意図のわからない要素の方が簡単です。スタイルシートが無効の状況を考えると、BIGと共に用いていれば｢大きくしたい｣ということは伝わる、STRONGなら｢強調したい｣ということは伝わります。
一つの要素にスペースで区切って複数のクラス名を付けることも可能ですが、対応（CSS2）しているのはIE5以降, Netscape6などに限られます。
.test1 { color: red }
.test2 { font-weight: bold;background: yellow }
.test3 { color: black }
.test1.test2.test3 { text-decoration: underline }
親子関係を含めた指定をする事も出来ます。
SPAN B { color: blue } /* SPAN要素内のB要素は全てマッチする */
SPAN STRONG.info { color: red }
例外的なスタイルを適用したい場合に使いますが、クラスセレクタと組み合わせることもできます。CLASSはグループなので何度でも同じ名前が使えますが、IDはその文書中に同じ名前があってはいけません。
.example { font-size: 12pt }
#example1 { color: red } /* 必ずシャープの直後 */
#example2 { color: blue }
ラジオボタンなどはname属性値を同じにしますし、フォームコントロールのname属性はそのフォーム内のみで有効で、文書中で要素を特定する目的に使うものではありません。また、A要素のname属性のように、文書中で一意でなければ役目を果たさないものもあります。それに対して、id属性は例外なく要素を特定できるものでなければなりません。id属性と「要素を特定するname属性」は同じ名前空間を共有するので、重複しないようにして下さい。紛らわしいので、このようなname属性はid属性で代用して欲しいようです。
<STYLE type="text/css">
#xyz { width: 80% }
#xyz P { margin: 0 }
</STYLE>
</HEAD>
<BODY>
<FORM action="xyz.cgi" method="post" id="xyz">
<P><INPUT type="radio" name="性別" value="男" checked>男
<INPUT type="radio" name="性別" value="女">女</P>
<P><INPUT type="submit" value="送信"></P>
</FORM>
<P><A href="#xyz">フォームへ</A></P>
<SCRIPT type="text/javascript">
var obj=document.getElementById("xyz");
// 要素へのリファレンスを取得
</SCRIPT>
※HTML 4では、example1とExample1のように大文字小文字を変えただけでは、同一文書内でID名として用いることは出来ません。また、HTML 4.01の仕様書で、A, APPLET, FORM, FRAME, IFRAME, IMG, MAP要素にname属性とid属性を共存させる場合、同じ値でなければならないと追記されています。FORM, IMGのname属性は、JavaScriptなどで独自に利用されていたのですが、4.01で追認されました。
アンカー擬似クラスは開始タグに挿入する必要の無い（しても効果のない）特別な存在で、CSS1ではA要素以外には使えないのでAを省略することも出来ます。:hoverはマウスポインタを乗せた時で、CSS2という規格なのでIE4以降, Netscape6などしか対応していません。
A:link { color: blue } /* unvisited link */
A:visited { color: purple } /* visited links */
A:hover { color: red }
A:active { color: red } /* active links */
それぞれの状況は共存し得るので、指定が衝突します。後述する優先順位によって上書きされてしまうので、:hoverは:link, :visitedより後に、:activeは最後にするのがベストだと思います。
A.nav:link { color: blue;font-weight: bold }
/* 未訪問はマウスポインタを乗せると
テキストは赤で背景色が黄色になる。 */
A.nav:hover { color: red;background: yellow }
A.nav:visited { color: green }
/* :hoverより後に記しているので訪問済みは
マウスポインタを乗せても緑のまま。背景色は黄色になる。 */
※ CSS2では、:hover, :active, :focusの三つが動的擬似クラスとされ、擬似クラスはA以外の要素や他の擬似クラスと組み合わせる事も可能とされています。MacIE5やNetscape6はサポートしていますが、その他のIEは対応していないのにきちんと無視しないので、使い方が難しいかもしれません。
A.search:link:hover {
color: yellow; /* 未訪問かつマウスポインタ */
}
A.search:link:focus {
background: red; /* 未訪問かつフォーカス */
}
A.search:visited:hover { color: red }
A.search:visited:focus { background: yellow }
また、擬似クラスは文脈セレクタや通常のクラスと組み合わせることも出来ます。ちゃんとサポートしているのはIE4以降, Netscape6などで、NC4は上、IE3は下が駄目です。
A:link B, A:visited B { color: green }
A.w3c:link, A.w3c:active, A.w3c:visited { color: fuchsia }
A.w3c:hover { color: red }
擬似クラスは、一部の例外を除いてリンクが訪問済みであるかなどの文書の構造とは離れた情報にアクセスする手段ですが、擬似要素というのもあって、要素の一行目や最初の一文字といった特定の個所を擬似的に要素と見立ててアクセスする方法です。ただ、擬似要素はCSS1をサポートしていると称するからには必ずサポートしなければならない機能（CSS1 core features）ではなく、MacIE5, Netscape6, IE5.5以降などしかサポートしていません。
次のようにして、宣言を最優先（補足）にすることが出来るのですが、IE4以降, Netscape6などしかサポートしていません。
H1 { color: red ! important;font-weight: bold !important }
H2 { font: 18pt serif !important } /* 簡略記述は全て最優先 */
競合が生じた場合の優先順位はセレクタの詳細度に依って決定され、詳細度が高いほど優先されます。
計算の方法は、セレクタ内の一意セレクタ数×100＋クラス数×10+タグ数となります。こんなの考えてられないので、要素→CLASS→IDの順に優先順位が上がると覚えておけばよいと思います。詳細度が同じなら、後に書く程優先されます。
| EM { color: red } | 1 |
| B EM { color: yellow } | 2 |
| B, EM { color: yellow } | 1 |
| #id1 { color: black} | 100 |
| .class1 { color: green } | 10 |
| B.class1 EM { color: purple } | 12 |
| #id1 .class1 EM { color: blue } | 111 |
擬似クラスも通常のクラスと同じ扱いですので、次の例では訪問済みリンクの色は紫になります。サイト全体に共通するスタイルにはLINK要素、そのページだけのスタイルにはSTYLE要素を利用するとすれば、STYLE要素の方を下にした方が良いでしょう。
<LINK rel="stylesheet" type="text/css" href="abc.css"> <STYLE type="text/css"> <!-- @import url(x.css); /*詳細度が同じなら後続の規則に上書きされる*/ A:visited { color: purple; /*訪問済みは詳細度の高いこちらが優先*/ } A { color: red;font-weight: bold } /*colorは上書きされる*/ A { color: blue } --> </STYLE>
尚、style属性はスタイルシートの最後にある一意セレクタと同等（詳細度 100）として扱われ、HTML属性はスタイルシートの先頭にある詳細度1のCSS規則に変換されます。ただし、優先度が低くても、より下位の要素に対する設定を打ち消すことは出来ません。以下の例なら、文書の背景色は#f5f5f5、レベル1, レベル2の見出しの文字色は、それぞれ緑と青になります。
<STYLE type="text/css">
<!--
BODY { background: #f5f5f5;color: black }
H1 { color: black !important } /* 最重要宣言しても無駄 */
-->
</STYLE>
</HEAD>
<BODY bgcolor="silver" text="black"
link="blue" alink="lime" vlink="purple">
<H1><FONT color="green">H1</FONT></H1>
<H2><FONT color="green" style="color: blue">H2</FONT></H2>
各要素は矩形ボックスを形成すると考えます。
黄色い部分がcontent（内容）とします。border（境界/赤い部分）が存在するとすれば、padding（パディング）は境界までの余白です。マージンは要素の最も外側の余白なので、ピンクの部分になります。境界が存在しない場合は、赤い部分がないだけです。マージン, パディングは継承性を持ちませんが、要素の位置は親要素や兄弟要素の位置に影響されるので、無関係ではありません。
また、一部の例外を除いて隣接している垂直方向のマージンは相殺し、通常最大のマージンが採用されます。正負の値が混在している場合は足し合わせた値、負の値のみでは最小値を採用します。段落の上下を一行空けるUAはあっても、段落間を2行空けるUAは少ないのと同じで、相殺したほうが視覚的に良いというのが理由のようです。
要素のフォントサイズを参照して、フォントの高さを基準にしたものがem、文字xの高さを基準にしたものがexとなります。font-size自体にこの単位を適用した時は、基準が無いので親要素のフォントサイズを参照します。
対照的に、%は参照する対象が属性によって違う点で異なります。表紙の表で、Pとなっている属性は親要素のwidthを参照し、Fとなっているものは要素のフォントサイズを参照します。また、borderのように%では指定できないものもあります。
in (inches) -------- 1in = 2.54cm cm (centimeters) mm (millimeters) pt (points) -------- 1pt = 1/72in pc (picas) --------- 1pc = 12pt
px (pixels) -------- 出力先に依存
モニタ上ではピクセルが基準なので、「絶対的な大きさ」は変換の比率によって表示される大きさが変わってしまいます。標準的なデバイス解像度（1インチあたりのドット数）は、Macの場合72dpi、Winは96dpiなので、12ptはMacでは12px、Winでは16pxに相当します。px単位で指定すれば、OSによる違いはある程度吸収できますが、出力先に依存する単位を基準にしてしまうと、将来的に問題が起こる可能性もあります。CSS2の仕様書には、高解像度のプリンタ用などに変換する方法（変換するのはUA）も解説されてはいますが、出力媒体を限定するのも対策の一つだと思います。
例えば、WinNC4のデフォルトフォントサイズが10ptであるのに対して、Mac版では12ptです。IEは共通(12pt)なので、WinIEはデフォルトのままだと際立って文字が大きいです。MacIE5（96dpi, 16pxがデフォルト）のように、解像度を自由に設定できるUAもあるようです。