スタイルシートの登場は、Webページデザイナーにとって、ページの見た目に関するデザイン能力を揮うための大きなきっかけとなりました。学術目的でWebを利用している人々の間では、文書の見栄え<presentation>よりも中身<content>が重要な役割を持つと考えられていますが、日常生活の一部としてWebを利用し始めた人々の間では、HTMLの視覚的表現力に不満を抱き、構造化文書として筋の通らない表現効果を狙う動きが出るようになりました。その志 -- Webページの表現を高めようとするもの -- は素晴らしいのですが、実際に用いられたトリックは、良からぬ副次効果を生みました。以下に列記したようなトリックは、ある特定の著者・読者層、特定の時代状況においては成立していたでしょうけれど、全ての人々、全ての時代状況に置いて成り立つ表現ではないのです。
これらのトリックは、Webページ [のデータ内容] を複雑にし、[変更に対する] 柔軟性を損ない、共同利用不可能性という問題を引き起こし、障害者からのアクセスに障壁を設けてしまいます。
スタイルシートは、上記の問題を解決すると同時にHTMLの貧弱な表現力を置き換えます。スタイルシートを使うと、行間の空け具合の調整や、各行の冒頭の字下げ、文字色と背景色の指定、フォント種・サイズの指定、その他様々な調整が簡単に実現できます。
例えば、次のちょっとしたCSSスタイルシート（「special.css」というファイル名で記録）は、段落の文字色を緑色にし、段落の周囲を赤実線で囲うよう指定する内容となっています。
P.special {
color : green;
border: solid red;
}
このスタイルシートを利用するHTML文書を書く場合、LINK要素によってスタイルシートファイルへのリンクを指定します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<LINK href="css">
</HEAD>
<BODY>
<P class="special">この段落の文章は特別に緑の文字で表示されます。
</BODY>
</HTML>
HTML 4.0 では、スタイルシートの次の機能をサポートしています。
一方スタイルシートは、特定の出力メディア、あるいは出力メディア群における表現効果を定めるものです。画像表示用のスタイル設定は印刷時にも流用可能でしょうけれど、音声出力にはほとんど役立ちません。この仕様書では、所与のスタイルシートが受け入れ可能な非常に広範に渡る出力メディア分類を利用可能としました。スタイルシートの出力メディア分類を行うことで、読み手のユーザエージェントは、現在不要なスタイル設定を読み込む必要がなくなります。また、スタイルシート言語によっては、1つのスタイル設定中に複数の出力メディア依存型の設定を織り込むことが可能でしょう。
これに対する現在の提案は、文書作成者に対し、各要素毎に表示指定の組み込みを許すというものです。こうすると、ユーザエージェントは、文書を受け取り始めると同時に表示に取りかかることができます。
多くの場合、関連文書に対しては同じスタイルシートを使い回して共通のスタイル設定を行いたいという要求があると思われますが、上記のように文書内部でのスタイル設定を施した場合、外部スタイルシートを使うよりもスタイル設定に関する効率が落ちてしまいます。なぜならスタイルシートを外部ファイルにしておくと、一度読み込んだスタイル設定はキャッシュされた状態で使い回しができるからです。この観点から、好ましい設定内容のスタイルシートは、公開されることが望まれます。
注。 [CSS2]の仕様書に含まれている、 HTML 4.0を対象としたスタイルシート例は、各要素に対する一般的スタイル設定事例集となっています。HTML文書を書く人も、ユーザエージェントの実装を行う人も、非常に有益な情報を得られることでしょう。
HTML文書へのスタイル設定は、当該文書そのものに埋め込むこともできますし、外部スタイルシートの情報を参照することもできます。
多くのスタイルシート言語がHTMLのスタイル設定に利用できます。簡素なスタイルシート言語は広範なブラウズ環境をカバーするために利用されるでしょうし、また特定用途に特化した精密なスタイルシート言語の利用も行われるでしょう。この仕様書ではスタイル設定の例文を記すスタイルシート言語として「Cascading Style Sheets」略して「CSS」（[CSS1]の項を参照のこと）を用います。
スタイル設定の個々の記述方法は各スタイルシート言語の文法に従います。
HTML文書に対してスタイルシート言語によるスタイル設定を行う場合には、使用するスタイルシート言語の種別を宣言する必要があります。
当該文書の基準となるスタイルシート言語についてはMETA要素による宣言を行う必要があります。例えば、CSSにする場合、当該文書のHEAD要素内に次のMETA宣言を記して下さい。
<META http-equiv="Content-Style-Type" content="text/css">
これはHTTPヘッダ部にも設定されるでしょう。上記のMETA宣言は、HTTPヘッダに記される次のHTTPヘッダ情報と等価です。
Content-Style-Type: text/css
ユーザエージェントが当該文書の基準のスタイルシート言語を判定する場合、次の優先順位に従って下さい。
文書中にstyle属性が設定されているけれどもベースのスタイルシート言語が設定されていない場合、その文書はHTMLの文法上間違いです。スタイルシートを扱えるオーサリングツールは、必ず基準のスタイルシート言語を（典型的にはMETA宣言によって）指定し、ユーザエージェントが自主判断で「text/css」を選択しなくて済むようにしてください。
記述方法は各スタイルシート言語の文法に従います。
次の例文は、ある特定の段落にだけ、文字の色やサイズを指定したものです。
<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
CSSでは、「名前 : 値」の組合せで個々のプロパティを記し、1つの要素に複数のプロパティを記す場合にはセミコロン「;」で区切って列記します。
style属性は、ある要素について文章全体の中の特定の一部分でのみスタイル指定を行いたい場合に利用します。もし同じ要素に対するスタイル指定を複数の場所で繰り返し行いたい場合は、STYLE要素によってグループ単位の指定としてまとめてしまって下さい。また [複数文書への応用など] 最も柔軟なスタイル設計を行うためには、外部スタイルシートの形でスタイル設定をして下さい。
<!ELEMENT %StyleSheet -- style info -->
<!ATTLIST STYLE
%i18n; -- lang, dir, for use with title --
%ContentType; #REQUIRED -- content type of style language --
%MediaDesc; #IMPLIED -- designed for use with these media --
title %Text; #IMPLIED -- advisory title --
>
開始タグ: 必要、終了タグ: 必要。
属性の定義
STYLE要素は、文書の初めの方で当該文書のスタイル設定を一括して組み込むためのものです。HEAD要素内に、複数のSTYLE要素を記しても構いません。
スタイルシートそのものをサポートしていないか、または特定のSTYLE要素中で使われているスタイルシート言語に対応していないユーザエージェントは、その STYLE要素の内容を非表示にする必要があります。当該文書の地の文と同様に表示してしまうのは誤りです。スタイルシート言語によっては、非対応ユーザエージェントから「STYLE」要素の内容を隠すための表記方法が用意されています。
スタイル設定の表記方法は各スタイルシート言語の文法に従います。
スタイルシート言語の実装状況を見ると、一般の要素中でのstyle属性を利用するより、STYLE要素を利用する方がより多くのスタイル設定を活用できるようになっているようです。例えば、CSSでは、STYLE要素によってなら次のような設定が行えます。
スタイル設定の優先順位と継承に関するルールは、各スタイルシート言語の文法に従います。
CSSによる次のH1要素を枠線で囲み、かつ中央揃えにするものです。
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
このスタイル設定を、ある条件のH1要素にのみ適用するような形にするには、「class」属性との併用で、次のように直すことになります。
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass">この標題H1には独自のスタイル指定が施されます</H1>
<H1>この標題H1にはスタイル指定が施されません</H1>
</BODY>
更にまた、ある1つのH1要素に対してだけスタイル情報の設定を行う場合は、id属性との併用で、次のように書くことになります。
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass">スタイル指定がされません</H1>
<H1 id="myid">スタイル指定が有効です</H1>
<H1>スタイル指定がされません</H1>
</BODY>
ほとんどすべてのHTML要素に対して スタイル情報を設定できるとはいえ、スタイル設定だけに着目した場合、とりわけDIV要素とSPAN要素の2つが特に有用です。この2要素は各要素単独では文書内での構造的意味づけが（ ブロックレベルかインラインレベルかという点を除いて）存在しないからです。この2要素のclass属性やid属性を活かしてスタイルシートを利用することで、HTML表現を限りなく拡張させることができます。
次の例では、SPAN要素を使って、段落冒頭の数語を小さい大文字のフォントで表示するようなスタイル設定が施されています。
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">The first</SPAN> few words of
this paragraph are in small-caps.
<P lang="ja">[ 訳注。上の段落の最初の2語が
「小さい大文字 (スモールキャップス）」のフォントで表示されます。]
</BODY>
次の例では、DIV要素とclass属性を使って、学術論文における「概要」の書式が、字間調整ありの状態に設定されています。他の章の「概要」の部分に対しても、class属性の共有により、同じスタイル設定を流用することができます。
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>The Chieftain product range is our market winner for
the coming year. This report sets out how to position
Chieftain against competing products.
<P>Chieftain replaces the Commander range, which will
remain on the price list until further notice.
</DIV>
</BODY>
HTML 4.0では、各出力メディア（例えば、グラフィック出力ディスプレイ装置、テレビ画面、携帯機器、音声出力機器、点字出力機器、など）の特徴を生かした文書デザインを行うことができます。「STYLE」要素のmedia属性を設定しておくと、ユーザエージェントは、読み手が求める出力環境に合わせたスタイル設定のみを拾い出すことが可能になります。第6章13節に掲げた、承認済みの出力メディア一覧を併せてご参照下さい。
次の例では文書中のH1要素に対してスタイル設定が施されていて、会議室などで投影装置にかけられたときは青字の表示になり、印刷された場合には中央揃えになるよう指定されています。
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
この例では、音声出力機器で当該文書を読み上げる場合に「A」要素によるアンカーの URI 部分については前後に効果音を加えて注意を引くよう指示しています。
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
出力メディア別のスタイル設定は、外部スタイルシートでのスタイル指定を行う場合に特に有効です。読み手側では自分の環境で必要になるスタイル情報だけを読み込めばいいからです。例えば、音声出力環境では目で見ることを前提としたスタイル設定を読み込まずに済ませられます。詳細は本章4節1項「出力メディアに応じたカスケード」をご覧下さい。
HTML文書とスタイルシートとを別々のファイルとして保存・活用することもできます。これには次のような利点があります。
HTML 4.0では、あるHTML文書に対して幾つでも外部スタイルシートをリンクさせることができます。複数の外部スタイルシートの相互作用については各スタイルシート言語が定めるところによります。（例えば、CSSの「カスケード」ルール。）
スタイル設定を行う場合、相互補完的な関係にある「代替スタイルシート< alternate style sheets>」を用意することもできます。 読み手はその中から好みに応じた設定内容のものを選択できます。例えば、小画面用のスタイル設定と、弱視用の（大きいフォントを使うなどした）スタイル設定を用意しておく、など。ユーザエージェントは、読み手に対し、代替スタイルシート群を選択可能にしておかねばなりません。
代替スタイルシートを用意する場合、そのうちの1つを第一指定のスタイルシート< preferred style sheet>として指定することもできます。ユーザエージェントは、読み手の指示が無い限り、第一指定のスタイルシートに基づいた表示を行う必要があります。
また、代替スタイルシートを用意する場合、（第一指定のスタイルシートも含めて）同じスタイル名<style name>を共有するスタイル設定としてグループ化することもできます。その名前のスタイル設定を読み手が選んだ場合、ユーザエージェントは、グループに属するスタイルシート全てを参照する必要があります。ただし違う名前のスタイルシートは参照してはなりません。スタイル設定のグループ化方法については、次項「外部スタイルシートの指定法」で説明します。
さらにまた、代替スタイルシートに加えて、ユーザエージェントが常に参照する必要のある、固定スタイルシート<persistent style sheets>を用意することもできます。
ユーザエージェントはスタイルシートを利用する場合、出力メディア設定に従う必要があります。
ユーザエージェントはまた、読み手の設定によって、書き手のスタイル指定を全て無視する仕組みを備える必要があります。この場合、書き手による固定スタイルシートも代替スタイルシートも参照してはなりません。
外部スタイルシートの指定は、LINK要素における次の属性によって設定します。
ユーザエージェントは、読み手に対して、代替スタイル設定のリストを表示し選択できるような手段を用意する必要があります。各々の選択項目名としてtitle属性値の利用が望まれます。
次の例では、まず「mystyle.css」という名のファイルとして固定スタイルシートが用意されています。
<LINK href="css">
この書式にtitle属性をつけ加えると、第一指定スタイルシート設定になります。
<LINK href="css">
更にrel属性に「alternate」というキーワードを加えると、これは代替用スタイルシートの設定となります。
<LINK href="css">
外部スタイルシートについて、より詳しくは第12章3節のリンクと外部スタイルシートに関する項をご覧下さい。
第一指定のスタイルシートは、META要素によって設定することもできます。 例えば、第一指定のスタイルを（上記）「compact」にする場合、次のMETA宣言をHEAD要素に記します。
<META http-equiv="Default-Style" content="compact">
第一指定のスタイルシートは、HTTPヘッダによっても設定され得ます。上のMETA宣言は、下記のHTTPヘッダ文と等価です。
Default-Style: "compact"
もしMETA宣言やHTTPヘッダに2つ以上のスタイルシート言語指定が記されていた場合、最後に記されたものが優先的に使用されます。この際HTTPヘッダの指定はHTMLのHEAD要素より先に記されたものとして扱われます。
もしLINK要素で2つ以上の第一指定スタイルシートが設定されていた場合、最初に記されたものが優先して使用されます。
META宣言やHTTPヘッダで指定された第一指定スタイルシートは、LINK要素による指定より優先して使用されます。
CSSのように、カスケードが可能なスタイルシート言語は、複数のリソースで行われるスタイル設定を組み合わせて利用することを可能にします。けれども、全てのスタイルシート言語がカスケード機能をサポートしているわけではありません。カスケードを行うためには、LINK要素、かつ/または HEAD要素中に記された順で行われます。
注。 この仕様書では、異なるスタイルシート言語間でのカスケードについては定めません。複数のスタイルシート言語の混用は避けて下さい。
次の例には、「compact」と名づけたスタイルシートが2つあります。もし読み手が「compact」スタイル設定での表示を選択した場合、ユーザエージェントは、この両方と「common.css」の3つを参照する必要があります。また「big print」スタイル設定での表示が選択された場合には、このスタイルシートと「common.css」とを参照することとなります。
<LINK rel="alternate stylesheet" title="compact" href="css"> <LINK rel="alternate stylesheet" title="compact" href="css"> <LINK rel="alternate stylesheet" title="big print" href="css"> <LINK rel="stylesheet" href="css">
以下はLINK要素とSTYLE要素を両方使ったカスケードの例です。
<LINK rel="stylesheet" href="css">
<LINK rel="stylesheet" href="css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
出力メディアに応じて異なる表現方法を想定したスタイル設定のカスケードも行われ得ます。LINK要素もSTYLE要素もmedia属性の設定ができますから、ユーザエージェントは、現在の出力に不要なスタイル設定をふるい分ける必要があります。
次の例では、「corporate」スタイル設定が「印刷用」「画面表示用」「音声出力用」の3バージョンが用意されています（音声出力などは車の中でeメールを読むのに便利でしょう）。これに対し「techreport」スタイル設定は全メディア共通の設定です。そしてSTYLE要素が定める文字色指定は、印刷と画面表示の場合には有効ですが、音声出力の際には無視されます。[訳注。正誤表に基づき最後の例文を訂正済み。]
<LINK rel="stylesheet" media="aural" href="css">
<LINK rel="stylesheet" media="screen" href="css">
<LINK rel="stylesheet" media="print" href="css">
<LINK rel="stylesheet" media="screen, print" href="css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
ユーザエージェントが文書を表示しようとする場合、スタイル情報に関する個別の値を確認する必要があります。例えばフォント体系、フォント名、サイズ、行の高さ、文字色、など。その具体的な方法は各スタイルシート言語に依存しますが、以下では一般的に通用する内容を記します。
ある要素に複数のスタイル設定が施されている場合、カスケード機能が用いられます。ユーザエージェントは、掛け合わせによって、複数スタイル設定のどれを活かすのかを確認します。その要素にスタイル設定が存在しない場合、スタイル設定の値が継承されるかどうかが確認されます。ただしすべての指定値が継承されるわけではありません。当該要素に明示的な設定がない場合は既定値が使われるという文法を持つプロパティも存在するからです。
値の継承が行われる場合、ユーザエージェントは、直前で閉じられている要素について、スタイル設定の有無を確認します。直前の要素に明示されたスタイル設定がなければ見つかるまで遡ります。この仕組みがあるため、スタイルシートの設定を単純化することができます。例えば、本文全体に対するフォント設定を行う場合、BODY要素に対してただ1度きりスタイル設定を行えば用が足りるからです。
スタイルシート非対応環境での再生時にSTYLE要素の内容を隠すための表記法を定めているスタイルシート言語もあります。
次の例は、CSSでの STYLE要素内容の隠し方を記したものです。内容をHTMLのコメント文として記してしまうという方法が採られています。
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Webサーバの管理者は、同一グループのHTML文書に対してはサーバの設定によってスタイルシート設定を加えられると便利だという風に考えることもあるでしょう。 HTTPの Linkヘッダは、[RFC2068]第19章6節1項2の記述によると、属性と値が等しいHTMLのLINK要素と、同じ効力を持ちます。複数のLink ヘッダは、複数のLINK要素と同じ効果を同じ順序で発揮します。例えば、次のLinkヘッダ
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
は、下記の「LINK」要素に相当します。
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
複数のLinkヘッダを用いて複数の代替スタイル設定を行うこと、またrel属性によって既定のスタイル設定を指定することも、可能です。
次の例ではrel属性から「alternate」の語を省くことにより、「compact」スタイルが既定スタイルとして指定されています。
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
これはHTMLメールにおいても機能します。ただし電子メールソフトの中には[RFC822]式ヘッダの並び順を変えられるものがありますから、Linkヘッダを用いたスタイルシート設定のカスケード順に悪影響が及ぶことを避けるために、同じヘッダフィールドに属する内容を結合する機能を利用するとよいでしょう。引用符は、属性値に空白文字が入る場合にのみ必要です。HTTPヘッダや電子メールヘッダに直接記述することが許可されていない文字や、ゲートウェイを通過させるのに問題がありそうな文字は、SGML実体を利用する文字参照で記してください。
HTTPヘッダに暗示的に表されるLINK要素やMETA要素は、文書のHEAD要素内に明示的に表されるどのLINK要素やMETA要素よりも早く当該文書のデータとして記されたものだという扱いを受けます。