ここではHTML4.01に適応するCSS2を基に解説をしていきます。
UAにより表現できるものと出来ないものとがあります。メディアグループを参照し、対象とするメディアと適応状況を確認してください。具体的にはプリンタで印刷するときに適応するCSSに音声のプロパティを指定しても効果がない、などということです。
以下の例では、印刷する際にのみ適応したいCSSファイルを指定しています。
<link rel="stylesheet" type="text/css" href="print.css" media="print">
link要素のrel属性とtype属性でtext/cssのスタイルシートであることを明言し、href属性でCSSファイルの位置を指定（ここではprint.cssというファイルを指定しています）し、media属性でメディアの種類を指定（ここではprintメディアに指定しています）しています。
<link rel="stylesheet" type="text/css" href="main.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
上記の例の場合、通常のパソコンモニタで閲覧する場合はmain.cssが適応されますが、印刷されるときはprint.cssが適応される、といった具合になります。
CSSは適応する対象のセレクタ、対象に適応するプロパティと値を記述します。
セレクタ {
プロパティ : 値
}
また、;で区切りプロパティを複数指定することができます。
セレクタ {
プロパティ : 値;
プロパティ : 値;
プロパティ : 値;
}
*
すべての要素に適応します。
* { color: red }
上記の例では文書内のすべての要素の文字色を赤でレンダリングします。
全称セレクタだけが唯一の構成条件ではない場合に限り、アスタリスクを省略することができます。
要素名
要素名にマッチしたものに適応します。
h1 { color: red }
上記の例ではh1要素の文字色を赤でレンダリングします。
要素名(a) 要素名(b)
要素名(a)内のすべての要素名(b)にマッチしたものに適応します。
h1 em { color: red }
上記の例ではh1要素内のすべてのem要素の文字色を赤でレンダリングします。
要素名(a) > 要素名(b)
要素名(a)の子要素の要素名(b)にマッチしたものに適応します。
h1 > em { color: red }
上記の例ではh1要素の子要素のem要素の文字色を赤でレンダリングします。
要素名(a) + 要素名(b)
要素名(a)と要素名(b)の親要素が同じで、要素名(b)が要素名(a)の直後にある状態であるときに、要素名(b)を主体に適応される。
h1 + h2 { margin-top: 5em }
上記の例ではh1要素の直後にh2要素が存在する場合、h2要素の上に5文字分のマージンを与えます。
属性にマッチしたものに適応します。
[属性名]属性名が指定されている要素にマッチすると適応されます。
a[name] { color: red }
上記の例ではa要素にname属性が指定してある場合、a要素の文字色を赤でレンダリングします。
[属性名=属性値]指定された属性値を持つ属性名が指定されている要素にマッチすると適応されます。
p[name="jump"] { color: red }
上記の例ではp要素にname属性値がjumpと指定してある場合、p要素の文字色を赤でレンダリングします。
[属性名~=属性値]属性値が半角スペースでリスト化されている場合、いずれかにマッチする要素に適応されます。
em[class~="main"] { color: red }
上記の例ではem要素のclass属性値がmainを含む（<em class="users main">愛</em>など）場合、em要素の文字色を赤でレンダリングします。
属性名がclassである場合に限り、クラスセレクタとしての記述の仕方が可能です。
[属性名|=属性値]属性値がハイフンでリスト化されている場合、先頭の属性値にマッチする要素に適応されます。
blockquote[lang|=en] { color: red }
上記の例ではblockquote要素のlang属性値がenからはじまる文字列（enやen-USなど）の場合、blockquote要素の文字色を赤でレンダリングします。
.class属性の属性値
[属性名~=属性値]の形式で、属性名がclassの場合は上記のような表記方法が可能です。class属性の属性値がマッチした場合に適応されます。
.point { color: red }
上記の例ではclass属性値がreadを含む（<strong class="point">夢</strong>など）場合、該当要素の文字色を赤でレンダリングします。
.item.weapon { color: red }
上記の例ではスペースで区切られたclass属性値にitemとweaponの両方が含まれる（<em class="item bow weapon">与一の弓</em>など）場合、該当要素の文字色を赤でレンダリングします。
#id属性の属性値
属性名がidの場合は上記のような表記方法が可能です。id属性の属性値がマッチした場合に適応されます。
#make { color: red }
上記の例ではid属性の属性値がmakeと指定してある場合、該当要素の文字色を赤でレンダリングします。
要素名:first-child
要素名が別の要素の最初の子要素である場合に適応されます。
p > em:first-child { color: red }
上記の例ではem要素がp要素の最初の子要素である場合にem要素の文字色を赤でレンダリングします。
<p><em>私</em>は<strong>海</strong>が好きだ。</p>
とある場合は、p要素の最初の子要素であるem要素に適応され、私は赤い文字でレンダリングされますが、それ以外には適応されません。
<p><strong>海</strong>が好きだ。<em>私</em>はな。</p>
とある場合は、em要素はp要素の最初の子要素ではないので適応されません。
* > em:first-child { color: red }
と、
em:first-child { color: red }
は同じで、em要素がなんらかの要素の最初の子要素であるならばマッチし、em要素の文字色を赤でレンダリングします。
p:first-child strong { color: red }
とある場合は、p要素がなんらかの要素の最初の子要素である場合、その子要素のstrong要素にマッチし、該当strong要素の文字色を赤でレンダリングします。
:link
未読であるリンクにマッチし適応されます。
a:link { color: red }
とある場合、参照先が未読（参照先のドキュメントのキャッシュが存在しない状態）のhref属性を含むa要素にマッチし、該当a要素の文字色を赤でレンダリングします。
:visited
既読であるリンクにマッチし適応されます。
a:visited { color: red }
とある場合、参照先が既読（参照先のドキュメントのキャッシュが存在する状態）のhref属性を含むa要素にマッチし、該当a要素の文字色を赤でレンダリングします。
:hover
ユーザによって、ポインティングデバイスでポイントしている状態で、かつアクティブではない場合にマッチし適応されます。
a:hover { color: red }
とある場合、href属性を含むa要素をポイント（マウスカーソルが当該要素のボックスの上に存在する、など）し、かつアクティブ（マウスカーソルが当該要素のボックスをクリックする、など）ではない場合に、該当a要素の文字色を赤でレンダリングします。
:active
ユーザによって、アクティブになっている要素にマッチし適応されます。
a:active { color: red }
とある場合、href属性を含むa要素がアクティブ（マウスカーソルが当該要素のボックスをクリックする、など）の状態にマッチし、該当a要素の文字色を赤でレンダリングします。
:focus
キーボード動作や、テキスト入力にフォーカスされている状態にマッチし適応されます。
input:focus { background-color : black }
とある場合、input要素により生成されたフォームにマウンスカーソルがフォーカスされると該当フォームの背景色を黒でレンダリングします。