スタイルシートは，ウェブページ設計者にとって大きな前進であって，設計者の能力を拡大しページの見かけを改善する。ウェブの生まれ故郷の科学分野環境では，人々は，表示よりは文書の内容に関心があった。より広範囲の人々がウェブを発見するにつれて，HTMLの制限が継続的な不満の源となった。文書作成者は，HTMLの様式的な制限を回避する工夫をしなければならなかった。ウェブページの表示を改善するという意図は素晴らしかったが，そのための技術には，好ましくない副作用があった。これらの技術は，ある人々に対してある時には動作したが，すべての人々対して常に動作するものではない。このような技術は，次を含んでいる。
これらの技術によって，ウェブページはかなり複雑になり，柔軟性は制限され，相互運用性の問題に悩むようになり，障害をもつ人々には，使用が難しくなる。
スタイルシートは，HTMLにおける表示機構の範囲の制限を取り払うと同時に，これらの問題も解決する。スタイルシートによって，テキスト行の間の空白部分の分量，字下げされた行の分量，テキスト及び背景に使用される色，フォントサイズ及びフォントスタイル，その他の詳細などを指定するのが簡単になる。
例えば，ファイル"special.css"に格納されている次の短かいCSSスタイルシートは，段落のテキストの色を緑色に設定し，赤い実線である枠線で段落を囲んでいる。
P.special {
color : green;
border: solid red;
}
文書作成者は，LINK要素を用いて，このスタイルシートをソースHTML文書にリンクすることができる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">This paragraph should have special green text.
</BODY>
</HTML>
HTML 4.0は，次のスタイルシート機能をサポートする。
対照的に，スタイルシートは，固有のメディア又はメディア集合に対して適用される。画面を意図としたスタイルシートは，印刷の際に適用できるが，音声ベースのブラウザでは，印刷にはほとんど役に立たない。この標準情報(TR)を使うことで，与えられたスタイルシートが適用できるメディアの分類を広範囲に定義できる。これによって，利用者エージェントは不適切なスタイルシートの検索を回避することができる。スタイルシート言語は，同じスタイルシート内のメディア依存性を記述するための機能を含んでもよい。
現在の提案は，文書作成者が各HTML要素内にレンダリング命令を取り込めるようにすることで，これらの問題に対処している。こうすることで，利用者エージェントが各要素をレンダリングしたくなるまでには，レンダリング情報が常に利用可能になる。
多くの場合，文書作成者は，文書の集まりに対して共通のスタイルシートを利用する。この場合，実際には，文書全体に渡ってスタイル規則を配布すると，リンクされたスタイルシートを使用するよりも性能が悪くなる。これは，ほとんどの文書の場合，スタイルシートが既に局所キャッシュに存在することによる。優れたスタイルシートが公開され利用可能な場合，この効果が促進される。
備考 [CSS2]に示されたHTML4.0のデフォルトスタイルシートの例は，一般に，各要素に対して受理されたデフォルトスタイル情報を表現している。文書作成者及び実装者は，同様にこれを有用な資源と見るかもしれない。
HTML文書は，それらに直接にスタイルシートを含めてもよいし，又はスタイルシートをインポートしてもよい。
いかなるスタイルシート言語もHTMLで使用してよい。ほとんどの利用者のニーズには，単純なスタイルシート言語で十分かもしれないが，高度な専門的ニーズには他の言語がより適しているかもしれない。この標準情報(TR)は，例に対して，スタイル言語 "段階スタイルシート" (Cascading Style Sheet，[CSS1]), 短縮形CSS，を使用する。
スタイルデータの構文は，スタイルシート言語に依存する。
文書作成者は，HTML文書に関連するスタイル情報のスタイルシート言語を指定しなければならない。
文書作成者は，META要素を使用して，文書のためのデフォルトスタイルシート言語を設定することが望ましい。例えば，CSSにデフォルトを設定するためには，文書作成者は，文書のHEADに次の宣言を置くのがよい。
<META http-equiv="Content-Style-Type" content="text/css">
デフォルトスタイルシート言語は，HTTPヘッダを用いて設定してもよい。上記のMETA宣言は，次のHTTPヘッダと等価とする。
Content-Style-Type: text/css
利用者エージェントは，(優先順位の高いものから低いものへと列挙された)次の方法に従って，文書のデフォルトスタイルシートを決定することが望ましい。
style属性を設定するがデフォルトスタイルシート言語を定義しない要素を含む文書は，正しくない。文書作成ツールは，利用者エージェントが"text/css"のデフォルトに依存する必要がないようにするために，デフォルトスタイルシート言語情報(通常は，META宣言)を生成することが望ましい。
style属性は，一つの要素に対するスタイル情報を指定する。行内スタイル規則のスタイルシート言語は，デフォルトスタイルシート言語によって提供される。スタイルデータの構文は，スタイルシート言語に依存する。
次の例は，特定の段落におけるテキストに色及びフォントサイズの情報を設定する。
<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
CSSでは, 特性宣言は，"name : value"という形式をもち，セミコロンで区切られる。
style属性は，個々のHTML要素に特定のスタイルを適用するために使用してもよい。スタイルが幾つかの要素で再利用される場合，文書作成者は，STYLE要素を使用して，その情報を再グループ化することが望ましい。柔軟性の最適化のためには，文書作成者は外部スタイルシートにおいてスタイルを定義するのがよい。
<!ELEMENT STYLE - - %StyleSheet -- style info --> <!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type %ContentType; #REQUIRED -- content type of style language -- media %MediaDesc; #IMPLIED -- designed for use with these media -- title %Text; #IMPLIED -- advisory title -- >
開始タグ: 必す(須), 終了タグ: 必す(須)
属性定義
STYLE要素によって，文書作成者は，文書のヘッドにスタイルシート規則を置くことができる。HTMLは，一つの文書のHEAD部に任意個のSTYLE要素があることを許容する。
スタイルシートをサポートしない利用者エージェント，又はSTYLE要素によって使用される固有のスタイルシート言語をサポートしない利用者エージェントは，そのSTYLE要素の内容を隠ぺいしなければならない。文書のテキストの一部として内容をレンダリングすることは，エラーとする。適合しない利用者エージェントからの内容の隠ぺいに対する構文をサポートするスタイルシート言語もある。
スタイルデータの構文は，スタイルシート言語に依存する。
style属性よりもSTYLE要素において，広範囲の規則を許容するスタイルシート実装が存在してもよい。例えばCSSでは，規則は，次に対してSTYLE要素の中で宣言される。
スタイル規則の優先度及び継承のための規則は，スタイルシート言語に依存する。
次のCSSSTYLE宣言は，文書のすべてのH1要素の周囲に枠線を置き，それをページの中央に寄せる。
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
特定のクラスのH1要素にだけこのスタイル情報を適用することが望ましいと指定するためには，スタイル情報を次のとおりに修正する。
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>
スタイル情報の有効範囲をH1の単一インスタンスに制限するためには，id属性を設定する。
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is not affected </H1>
<H1 id="myid"> This H1 is affected by style </H1>
<H1> This H1 is not affected </H1>
</BODY>
スタイル情報はほとんどすべてのHTML要素によって設定されるが，DIV及びSPANの二つの要素は，表示セマンティクスを強要しない点で特に有用となる。ただし，ブロック-レベル及び行内を除く。スタイルシートを組み合わせる場合，特に，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.
</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によって，文書作成者は，図形表示，テレビ画面，携帯装置，音声ベースのブラウザ，点字に基づく触覚的装置などの文書がレンダリングされることになるメディアの特色を利用した文書を設計することができる。media属性を指定することによって，文書作成者は，利用者エージェントに選択的にスタイルシートをロードし適用させることができる。認識されるメディア記述子のリストを参照すること。
次の宣言の例は，H1要素に適用される。ビジネスの会議で投影する場合は，すべてのインスタンスを青色とする。印刷の場合は，すべてのインスタンスを中央に寄せる。
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
次の例は，音声出力で使用するために，アンカに音声効果を付加している。
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
メディア制御は，外部スタイルシートに適用される場合は特に興味深い。これは，利用者エージェントが現在の装置に適用されるスタイルシートだけをネットワークから検索することによって，時間を節約できることによる。例えば，音声ベースのブラウザは，視覚的レンダリング用に設計されたスタイルシートのダウンロードを回避できる。更なる情報のためにはメディア依存段階を参照すること。
文書作成者は，スタイルシートをHTML文書から分ける場合がある。これには，次の幾つかの利点がある。
HTMLによって，文書作成者は，任意個の外部スタイルシートを一つの文書と関連付けることができる。スタイルシート言語は，例えばCSS"段階"規則などの，複数の外部スタイルシートが相互作用する方法を定義する。
文書作成者は，代替スタイルシートと呼ばれる相互に排他的なスタイルシートを数多く指定してもよい。利用者は，自分の好みに応じて好きなスタイルシートを選択してもよい。例えば，文書作成者は，小画面用に設計されたスタイルシートを指定したり，視力が弱い利用者用に(フォントを大きくするなどして)他のスタイルシートを指定したりしてもよい。利用者エージェントによって，利用者は，代替スタイルシートから選択できることが望ましい。
文書作成者は，代替スタイルシートの一つを優先スタイルシートと指定してもよい。利用者エージェントは，利用者が異なる代替スタイルシートを選択しなかった場合には，文書作成者の優先スタイルシートを適用することが望ましい。
文書作成者は，(文書作成者の優先スタイルシートを含む)幾つかの代替スタイルシートを，単一のスタイル名にグループ化してもよい。利用者が名前の付いたスタイルを選択する場合，利用者エージェントは，その名前をもつスタイルシートすべてを適用しなければならない。利用者エージェントは，異なるスタイル名をもつ代替スタイルシートを適用してはならない。外部スタイルシートの指定では，スタイルシートの集合の命名方法を示す。
文書作成者は，任意の代替スタイルシートに加えて，利用者エージェントが適用しなければならない永続的スタイルシートを指定してもよい。
利用者エージェントは，どのスタイルシートが適用される場合でも，メディア記述子を重視しなければならない。
利用者エージェントは，利用者が，文書作成者のスタイルシートを完全に使用不可にできるようにするのも望ましい。この場合，利用者エージェントは，どの永続的スタイルシートも，どの代替スタイルシートも，適用してはならない。
文書作成者は，LINK要素の次の属性をもつ外部スタイルシートを指定する。
利用者エージェントは，利用者が代替スタイルのリストを閲覧し選択する方法を提供することが望ましい。title属性の値を，各選択子の名前とするのがよい。
次の例では，まず，ファイルmystyle.cssの中に置かれた永続的スタイルシートを指定する。
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
title属性を設定することによって，これを文書作成者の優先的スタイルシートにする。
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
キーワード"alternate"をrel属性に付加することによって，これを代替スタイルシートにする。
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
外部スタイルシートについてさらに情報を入手したい場合は，リンク及び外部スタイルシートを参照すること。
文書作成者は，META要素を使用して，文書の優先的スタイルシートを設定してもよい。例えば，優先的スタイルシートを"compact"(先の例参照)と設定するためには，文書作成者は，HEADに次の行を含めればよい。
<META http-equiv="Default-Style" content="compact">
優先的スタイルシートは，HTTPヘッダを用いても指定してもよい。先のMETA宣言は，次のHTTPヘッダと等価とする。
Default-Style: "compact"
二つ以上のMETA宣言又は HTTPヘッダが優先的スタイルシートを指定する場合は，最後のものを優先する。ただし，HTTPヘッダは，このためには，文書HEADより先に現れると考える。
二つ以上のLINK要素が優先的スタイルシートを指定する場合は，最初の要素を優先する。
META又はHTTPヘッダを用いて指定される優先的スタイルシートは，LINK要素を用いて指定される優先的スタイルシートに優先する。
CSSなどの段階スタイルシート言語によって，複数のソースからのスタイル情報を互いに混合することができる。しかし，すべてのスタイルシート言語が段階化をサポートするわけではない。段階を定義するためには，文書作成者は，LINK要素及び/又はSTYLE要素の列を指定する。スタイル情報は，HEADに要素が現われる順番に段階化される。
備考 この標準情報(TR)は，異なるスタイル言語からのスタイルシートを段階化する方法を規定しない。文書作成者は，スタイルシート言語の混合を回避するほうがよい。
次の例では，"compact"と命名された二つの代替スタイルシートを指定する。利用者が"compact"スタイルを選択する場合，利用者エージェントは，永続的な"common.css"スタイルシートと同様に，二つの外部スタイルシートも適用しなければならない。利用者が"big print"スタイルを選択する場合，代替スタイルシート"bigprint.css"及び永続的"common.css"だけが適用される。
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">
LINK要素及びSTYLE要素の両方を含む段階の例を次に示す。
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
段階は，異なるメディアに適用できるスタイルシートを含んでもよい。LINK及びSTYLEは両者とも，media属性を用いて使用される。この場合，利用者エージェントには，現メディアに適用されないスタイルシートをろ過する責任がある。
次の例では，"集合的"スタイルシートが幾つかの版で提供される場合の段階を定義する。ここでの版は，印刷に適するもの，画面使用に適するもの，(例えば車中で電子メールを読む場合に有用な)音声ベースのブラウザに適するものとする。"techreport"スタイルシートは，すべてのメディアに適用される。STYLE要素によって定義される色規則は，印刷及び画面に対して使用されるが，聴覚的レンダリングには使用されない。
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
利用者エージェントが文書をレンダリングしようとする場合，例えば，フォントファミリ，フォントスタイル，サイズ，行の高さ，テキストの色などのスタイル特性に対する値を見つける必要がある。正確な機構はスタイルシート言語に依存するが，次の記述が，一般的に適用できる。
段階化機構は，多くのスタイル規則がすべて直接に要素に適用される場合に，使用される。この機構によって，利用者エージェントは，固有性によって規則を並べ替え，どの規則を適用するのがよいかを決定することができる。規則を見つけられない場合，その次に行うことは，スタイル特性を継承できるかどうかに依存する。すべての特性を継承できるわけではない。これらの特性に対して，スタイルシート言語は，特定の要素のための明示的な規則が存在しない場合に使用するために，デフォルト値を提供する。
特性を継承できる場合，利用者エージェントは，直近の囲み要素を調べて，規則がそれに適用されるかどうかを判断する。この過程は，適用可能な規則が見つかるまで継続する。この機構によって，スタイルシートを簡潔に指定できる。例えば，文書作成者は，BODY要素に適用される単一の規則によって，そのBODY内のすべての要素に対してフォントファミリを指定してもよい。
スタイルシート言語の中には，文書作成者が，適合しない利用者エージェントからSTYLE要素の内容を隠ぺいできることを意図した構文をサポートするものがある。
次の例は，CSSがSTYLE要素の内容を注釈化し，古い適合しない利用者エージェントが確実にそれらをテキストとしてレンダリングしないようにする方法を示している。
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
ウェブサーバ管理者は，スタイルシートがページの集合に適用されるようにサーバを構成すると便利と考える場合がある。[RFC2068]の19.6.1.2で示されたHTTPLinkヘッダには，同じ属性及び値をもつLINK要素と同じ効果がある。複数のLinkヘッダは，同じ順番で現れる複数のLINK要素に対応する。例えば，次の二つの例は対応している。
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
複数のLinkヘッダを使用して幾つかの代替スタイルを指定し，rel属性を使用してデフォルトスタイルを決定することができる。
次の例では，"compact"はデフォルトで適用される。これは，rel属性に対する"alternate"キーワードを省略しているためである。
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要素よりも前に出現するものとして定義される。