since: 30th/Aug./2000; last modified: 27th/Sep./2001
CSS は HTML 文書の見栄えを調整するための仕組みです。ここでその概略を述べます。まずは試してみたい方は、「CSS スピードラーニング」を、さらに詳しい解説は「CSS 解説」を御覧ください。
段落を表す P 要素の行頭を一文字へこませたいとします（インデントを一文字分取る）。この指定は、 CSS では次のように記述します；
p { text-indent: 1em }
p をセレクタと呼び、スタイル宣言の適用対象を表します。 { から } までを宣言と呼び、見栄えを指定します。ここで、 text-indent は CSS のプロパティと呼び、 1em はその値です。
一つのセレクタに複数のスタイル宣言を記述する時は、相互をセミコロン ; で区切ります；
p em { font-style: italic;
color: red;
text-decoration: underline }
セレクタ p em は「 p 要素の内側に入っている em 要素」を表します。この宣言では、「文字スタイルがイタリック体で、色が赤、下線表示」の三つが指定されています。
例えば、 h1 と云う要素にマッチするセレクタです；
h1 { font-weight: 900 }
例えば、 p 要素の子孫要素である em 要素にマッチするセレクタです；
HTML 文書の例；
<p> ここは p 要素の内容部です。 或る要素の内容部に現れる要素のことを、 一般に<em>子孫要素</em>と呼びます。 </p>
対応するスタイルシートの例；
p em { color: red }
要素に class 属性が与えられている場合、セレクタで参照できます。
属性セット Core の一部である class 属性は、 body 要素内のあらゆる要素 (Flow) に与えることが出来ます。
HTML 文書の例；
<p class="note"> ここは p 要素の内容部です。 この p 要素には、 class 属性が与えられており、 その属性値は "note" です。 </p>
対応するセレクタの例
p.note { font-style: italic }
ここでは class="note" を持つ P 要素だけにマッチするようにセレクタを書きましたが、 class="note" を持つ全ての要素にマッチするようにも書けます；
.note { text-decoratoin: underline }
要素に id 属性が与えられていれば、セレクタで参照できます。
属性セット Core の一部である id 属性は、body 要素内のあらゆる要素 (Flow) に与えることが出来ます。
HTML 文書の例；
<h1 id="optical-properties">光学物性</h1>
対応するセレクタの例；
h1#optical-properties { color: yellow }
id 属性の値には、一つの文書中で一回だけしか用いられていないと云う一意性が必要です。別の場所に同じ id 属性を与えないようにくれぐれも注意が必要です。
HTML 文書でスタイルシートを利用する場合は、 HEAD 要素内でその種類を明記します。ここでは CSS を宣言します；
<head> <title>CSS の例</title> <meta http-equiv="content-style-type" content="text/css" /> </head>
文書中で標準的に利用するスタイルシートの種類を、head 要素の中に、 meta タグを利用して記述しています。
ここでは "text/css" を指定しましたが、これが CSS の MIME タイプです。
文書中で標準的に利用するスタイル宣言を head 要素内の style 要素で記述できます。
<head>
<title>CSS の例</title>
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
p { line-height: 1.5 }
</style>
</head>
p { line-height: 1.5 } がスタイルです。文書中の全ての P 要素の一行の高さが、文字の 1.5 倍になるように指定してあります。
或る一つの要素にだけスタイルを適用する場合は、当該要素の style 属性で指定します。 style 属性は style 属性モジュールで定義されており、属性セット Common に含まれる属性セット Style 内に含まれます。したがって、 body 要素以下の階層の全ての要素 (Flow) に定義されています：
「日本列島改造論」を著した <span style=" color: red; text-decoration: underline">田中角栄</span> とはどんな人だったのだろう？
ここで田中角栄 は span 要素の内容ですが、この span 要素には style 属性が与えられています。「文字色が赤、下線表示」が指定されています。
このように style 属性を与える方法のスタイルシートを、インラインスタイルと呼びます。 XHTML 1.1 では非推奨となっており、構造化を目的として外部スタイルシートを用いるように推奨されています。
複数の文書で共通して利用するようなスタイルシートは、文書から独立したファイルにしておけます。このとき、拡張子は *.css です（例； atomic.css, cool.css ）。
或る文書が、 atomic.css と cool.css を利用したい場合、 head 要素で link 要素を利用して明記します。
<head>
<title>CSS の例</title>
<meta http-equiv="content-style-type" content="text/css" />
<link rel="StyleSheet" href="../visual/atomic.css"
type="text/css" />
<link rel="StyleSheet" href="../visual/cool.css"
type="text/css" />
</head>
ブラウザは、まず visual フォルダにある atomic.css が読み込まれ、これに cool.css が上書きされ、出来あがったスタイルシートを適用します。
これは固定スタイルシートと呼ばれる例です。外部スタイルシートには、代替スタイルシートと云うものもありますが、ここでは割愛します。詳しくはCSSの紹介を御覧ください。
複数の文書で共有する一般的なスタイルを記述した外部スタイルシートと、文書内の要素毎に適用できる準一般的なスタイルを記述した STYLE 要素と、極特殊なスタイルを記述したインライン・スタイルの三つに、相矛盾した記述があるときは、特殊なものほど優先されます；
優先順位： 外部スタイルシート < STYLE要素 < インライン・スタイル
同じSTYLE要素内でも、下の行に記述されたものほど優先度が上がります。読みこみ順が後ろに行くほど優先度が上がると云えます。
但し、 "!important" と云うキーワードで、任意のスタイル宣言の優先度を最高に指定出来ます。
スタイルシートは、ブラウザ、ユーザ、ページ記述者の三者が持寄る可能性があります。ページ記述者のものが最も優先されます；
優先順位； ブラウザ < ユーザ < ページ記述者
まずブラウザが用意したスタイル・シートがあり、それをユーザが上書きし、更に各ページ毎に記述されているスタイルが上書きすると云う順番だと考えて良いでしょう。
但し、 !important と云うキーワードで、任意のスタイル宣言の優先度を最高に指定出来ます。
こうして最終的に出来あがったスタイル・シートが適用されます。
CSS は基本的には見栄えを指定するものですが、一般にレンダリング処理を具体的に指定するものだといえます。具体的には、コンピュータスクリーンに対する色、文字の大きさ、行間、配置などの他に、次のような処理も考えられます：
他にも色々と理由はありますが、 CSS では、当該スタイル内容の目標メディアを指定することが出来ます。例えば、コンピュータスクリーンは "screen"、印刷された紙媒体は "print"、音声合成出力装置は "aural" 、携帯端末、 PDA などの表示能力が制限されたデバイスは "tty" などです。具体的には、次のように指定します：
<head>
<title>CSS のメディアタイプ</title>
<link rel="stylesheet" type="text/css"
href="./atomic.css" media="all" />
<link rel="stylesheet" type="text/css"
href="./monitor.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="./paper.css" media="print" />
<link rel="stylesheet" type="text/css"
href="./speech.css" media="aural" />
</head>
ここでは四つの外部スタイルシートが指定されています。例えば、コンピュータスクリーンでは、 "atomic.css" と "monitor.css" が利用され、それ以外のスタイルシートは読み込まれません。
他にも CSS の基本機能については紹介しなければならないことが沢山ありますが、少しずつ使っていけばよいでしょう。詳しくは、「CSS とはなんだろうか」を参照ください。