本文書では、CSSとは何か・何ができるのかということから、CSSファイルを作成し、HTML文書の外部から参照させる指定方法、CSSを使用する際に User-Agent（ユーザーエージェント）側の誤作動を防止するための方法など、CSSを扱うための一連の流れを解説します。
ブラウザの種類などの閲覧環境を選ばないアクセシビリティの高いサイト作りには CSS（Cascading Style Sheets：カスケーディングスタイルシート）は欠かせません。CSS を使うことで、HTML は本来の情報伝達のみの役割に徹することができ、さらにウェブページの見栄えを整えるのに役立ちます。Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しており、User-Agent（ユーザーエージェント）は、制作者スタイルシート、ユーザースタイルシート、デフォルトスタイルシートの中から好みのスタイルを自由に選択できるのが特徴です。
まず、スタイルシート（Style Sheets）とは、HTML のようにウェブ上で使われている言語に限ったものではなく、パソコンを利用している方であれば、普段から何気なくスタイルシートにふれていることが多いはずなのです。たとえば、Microsoft Word, 一太郎などのワープロソフトでフォントの種類や文字の大きさ、色、行間の幅の指定など様々な文書の見栄え（レイアウト）に関する情報を定義しているのがスタイルシートなのです。
そして、ウェブ上で使われるスタイルシートとは、主に HTML文書に対しての見栄え（レイアウト）を定義することを指します。 スタイルシートには、いくつかのスタイル言語があり、HTML文書の見栄えを指定するためのスタイル言語には、各視覚ブラウザの実装状況などから、CSS（カスケーディングスタイルシート）が使用されています。つまり、CSS もいくつかのスタイルシートの中の一種でしかなく、他にもウェブ上で使われているスタイル言語には、XSL（eXtensible Stylesheet Language） などがあります。CSS がHTML文書に対しての見栄え（レイアウト）を定義し、XSL は、XML文書に対しての見栄え（レイアウト）を定義します。そして、本稿（CSS辞典）で扱うのが、HTML文書に対しての見栄え（レイアウト）を定義するための CSS ということなのです。
では、CSSでは何ができるのでしょうか。HTML には、文章を 「見出し」「段落」「リスト」「表」のように各部分を構造化する特徴がありました。 これに対して、HTML文書の見栄えを定義する CSS は、これら HTML によって構造付けされた「見出し」なら「見出し」の構造に対してレイアウトを定義します。 たとえば、見出し部分の HTML 自体に直接文字の色や形などを装飾するための指定があると、せっかく「見出し」として定義された部分に装飾に関する不明確な情報が余計に混じってしまうことになり、情報伝達の妨げとなります。 そこで CSS は、これまで HTML が担ってきた情報伝達と見た目を整える 2つの作業の内、見た目を整える作業については、CSS が分担することで、HTML が効率的に情報交換を行えるように、HTML文書が本来の役割とは違う見た目を達成するのに役立つのです。
つまり、CSS は、HTML文書のコンテンツや論理構造と表現（見栄え）とを分離させることで、さまざまなメリットを生みます。 HTML はシンプルなまま、HTML 本来の役割に徹することができ、連結させるのが特徴であると述べたように、一度定義したスタイルを複数の HTML文書で共有させることができます。これにより、サイト全体のデザインに一貫性を持たせ、メンテナンス性が大幅に向上します。 CSS による文書のプレゼンテーション手法を習得できれば、あなたのウェブサイトはより鮮やかに、そしてより効率的な情報交換が行えるようになるのです。
CSS により定義したスタイルを HTML文書に適用する方法は、主に次の 3種類にわかれます。
<head>～</head>"）間で、style要素を使って記述するこれら 3つの方法のうち、もっとも簡単なのが「1, style属性で直接指定する」方法です。 実際、ウェブページの作成に慣れていない人ほど、この方法でスタイルを宣言している場合が多く見受けられます。 ですが、3つの方法のうちで最も CSS のメリットを活かすことができるのは、「3, スタイル宣言を記述したファイルを別に作成し、link要素で適用したい HTML文書に参照させる」方法です。
この方法は、3つの中でも最も難しそうで手間の多そうな手法ですが、何故この手法をわざわざ使う必要があるのかを明確にし、そのメリットを説明しておかないことには、わざわざ大袈裟に CSS専用のファイルを作成して別ルートからスタイルを参照させるといった面倒なことをする必要性があるのかを理解できないことと思います。
CSS のルールセットを記述したファイルを外部から参照させる方法のメリットは、全ての HTML文書に共有させることができるので、サイト全体の表現を簡単に統一することができます。 さらに、スタイルを定義しているファイルの内容の一部を変更するだけで、サイト全てのファイルの表現を同時に全て変更することが可能となるので、作業の効率性・メンテナンス性が飛躍的に向上します。 CSSファイルを外部から参照させる手法のメリットはこれだけではありません。
ウェブページ作成の心得みたいなものに「KISSを大切にせよ」という一種の諺（格言）があります。 "KISS" とは「Keep It Simple,Stupid」、または「Keep It Small and Simple」のそれぞれ頭文字をとったもので、どちらも「ウェブページは、シンプルにすべし」ということを意味します。 CSSファイルを外部から参照する方法は、他の 2つの方法とは違って HTML文書自体に直接スタイルを記述しているわけではないので、HTML文書はシンプルな状態のままで、装飾を施すことができます。 つまり、シンプルな HTML文書はファイル自体の容量が軽く、他の 2つの方法に比べてもページのレンダリングが速くなります。さらに、CSS が提案される以前より、HTML文書に対するスタイルシートは、link要素で参照することが提案されていたことから、スタイルシートを link要素で提供することで最適化されるように CSS の仕様も UA の実装も設計されています。
関連リンク: CSSの書き方・使い方 / style属性 / style要素
CSSファイルとは、HTML文書の各要素に対してスタイル宣言のルールセットを記入したファイルのことを指します。 スタイル宣言のルールセットの記述には、Windows に付属しているメモ帳などのテキストエディタを利用して記述することができます。 たとえば、HTML文書において見出しとして定義された h1要素に対して、ちょっとしたレイアウトを施したい場合には以下のような記述を行います。
h1 {
text-align : center ; border-width : 1px 4em 0em 4em ;
border-style : solid ; border-color : navy ;
}
これは h1要素内のテキストを中央揃え（"text-align: center ;"）に指定し、さらに h1要素に枠線の装飾（"border-width : 1px 4em 0em 4em ; border-style :solid ; border-color : #000080 ;"）を施しています。
こうしたルールセットをいくつも記述して、CSSファイルとして保存します。このルールセットをいくつも並べたものが順序立てられたリスト（Cascade）です。
また、保存する際に、HTML文書であれば一般的に「.html｣、または｢.htm」といった拡張子をつけるように、 CSSファイルの場合は一般的に「.css 」の拡張子をつけて保存します（※拡張子は httpd.conf や .htaccess などのウェブサーバーの動作設定に依ります）。
HTML文書で CSS を使う場合には、ブラウザがページを表示する際や検索エンジンのロボットがページの情報を収集する際など、User-Agent（ユーザーエージェント）が誤作動を起こさないようにヘッダ（"<head>～</head>"）間に、あらかじめ User-Agent（ユーザーエージェント）に対して 「この HTML文書では、CSS を使用しています」といったお知らせをするための CSS（カスケーディングスタイルシート）専用の MIMEタイプを設定します。CSS の MIMEタイプは "text/css" です。
<meta http-equiv="Content-Style-Type" content="text/css">
次に、link要素に対して href属性で CSSファイルのウェブサーバー内での所在を URI で指定します。 この指定が行われた HTML文書は link要素で指定された URI の CSSファイルを参照することができるようになり、HTMLで構造化された各要素に対して、指定されたスタイルの宣言が適用され、レイアウトが施されます。
<link rel="stylesheet" href="sample.css" type="text/css">
link要素の「rel="stylesheet"」の部分が外部CSSファイルの参照を示し、続く「href="sample.css"」の部分が "sample.css" のファイルを参照するように、そのファイルの所在を示しており、「type="text/css"」 は、CSS用の MIMEタイプを示したものです。
なお、この link要素の指定を複数記述することで一つの HTML文書に対して複数の外部CSSファイルを参照させることも可能です。
「CSSファイルの作成」「ユーザーエージェントに対するCSS使用の宣言」「使用するCSSファイルの所在の指定」の 3行程が完了すれば、実際に視覚ブラウザから、指定した CSS のレンダリングが施されているかを確認してみましょう。ここまでの作業をまとめると、ヘッダ（"<head>～<head>"）間の一連の記述は以下のようになっているはずです（HTML 4.01移行型DTD を想定しています）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=文字コード"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="sample.css" type="text/css"> <title>外部CSSの指定方法</title> </head> <body> ......
関連リンク: head要素