ページとは別にスタイルシート用のファイルを作り、そこへスタイルの指定をまとめて記述します。

このファイル内で設定した内容は、複数のページで共有することができます。サイト全体で共通する部分を設定しておくと便利です。

例えば、サイト全体の背景色を変更しようとした場合、

■ページ単位でスタイルが設定されている場合
→ ページごとに書き換える必要があります。（ページ数が多い場合は大変な作業です）

■外部スタイルシートでスタイルが設定されている場合
→ 1ヵ所を書き換えるだけで、全てのページの背景色を変更できます。

デザインを一括管理できるところがスタイルシートの利点のひとつなので、スタイルを設定する場合は外部スタイルシートの使用をお勧めいたします。

スタイルシート用のファイルを作成し、そこへスタイルの指定内容を記述します。このスタイルシート用のファイルは、メモ帳などのテキストエディタで簡単に作成することができます。

※外部スタイルシートファイルの拡張子は .css です。ファイル名は、半角英数字で任意の名前を指定します。
※外部スタイルシートファイルにスタイルの指定を記述するときは、<style type="text/css"> 〜 </style> や <!-- 〜 --> は入れません。スタイルの指定部分のみを記述します。

ページのhead要素内に次の要素を記述して、対象となる外部スタイルシートファイルを指定します。

• 外部スタイルシートファイルを読み込む
• パスの指定方法

上記の指定を行うことで、外部スタイルシートに記述されたスタイルの設定が、ページ内に適用されることになります。

サイト内全てのスタイル設定を1枚のファイルに記述すると、サイトの規模やデザインなどによっては、その記述が非常に長いものになっていまいます。

そのような場合には、用途別（レイアウト別）にスタイルシートファイルを分け、スタイルの記述を分散しておくと管理が楽になります。

下記の例では、1. 全てのページで使用するスタイル（body.css）、2. リスト用のページで使用するスタイル（list.css）、3. 詳細ページで使用するスタイル（details.css）、この3つのファイルに分けてスタイルを設定しています。

（1）body.css
全ページで共通するスタイルを設定。例えばページの背景色やマージン、ヘッダやフッタのデザインなど。

（2）list.css
リスト表示用のページで使用するスタイルを設定。

（3）details.css
詳細ページで使用するスタイルを設定。

上記の例では、「リスト表示」のページでは body.css と list.css を読み込みますが、details.css は読み込みません。「詳細」ページでは body.css と details.css を読み込みますが、list.css は読み込みません。

複数の外部スタイルシートファイルを読み込む場合、ページ内の記述は次のようになります。

画像へのパスを相対URLで指定する場合は、外部スタイルシートファイルの位置を基準とした相対URLで指定します。

例）
http://www.tagindex.com/body.css
http://www.tagindex.com/image/example.gif
http://www.tagindex.com/demo/index.html

このような構成の場合、index.html から見た画像（example.gif）へのパスは、

../image/example.gif

上記のようになりますが、外部スタイルシートファイル（body.css）から見た画像へのパスは次のようになります。

image/example.gif

例えば、背景画像を表示させるスタイル指定を body.css 内に記述して、この外部スタイルシートファイルを index.html に読み込んで使用する場合、スタイルの指定は次のようになります。

• パスの指定方法