スタイルシートの記述方法

ここでは、スタイルシートの記述方法をまとめています。ご参考になれば幸いです。
スタイルシートの記述方法は、以下の４通りがあります。

スタイルシート・ファイル（拡張子.css）にスタイルを記述して、linkエレメントでスタイルシート・ファイルを読み込む方法。（外部ファイルの読み込み。その１）
スタイル・ファイル（拡張子.css）にスタイルを記述して、styleエレメントに@import url(URL)表記でスタイルシート・ファイルを読み込む方法。（外部ファイルの読み込み。その２）
styleエレメントにスタイルを記述する方法。
個々のエレメントにstyleアトリビュートで直接記述する方法。（インラインでの埋め込み）

さて、どれを使うべきなのか？
スタイルシートは、文書から独立したシートであり、スタイルシートを入れ替えることでスタイルが変更できるわけであるから、「外部ファイルの読み込み」が本来の使い方となるでしょう。
しかし、同時に２つ以上の方法で記述する（優先順位は決められています）こともできるので、目的に応じて使い分ければ良いと思います。

外部ファイルの読み込み。その１

h4.cssファイル

cssファイルは、下の例のようにセレクタと設定だけを書き込んだファイルで拡張子はcssとします。

ソース

h4 {color:blue;
     text-align:center;} /*第４見出しは青い色で中央揃えです。*/

HTMLファイル

HTMLファイル上では、スタイルの設定は行いません。詳細はlinkエレメントをご参照ください。

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link href="h4.css" rel="stylesheet" type="text/css">
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
</head>
<body>

<h4>第４見出し（青い色で中央揃えです。）</h4>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第４見出し（青い色で中央揃えです。）

対応状況

外部ファイルの読み込み。その１

スタイルシート対応ブラウザであれば、OKです。安心して使いましょう。

外部ファイルの読み込み（@import）。その２

h5.cssファイル

cssファイルは、下の例のようにセレクタと設定だけを書き込んだファイルで拡張子はcssとします。

ソース

h5 {color:red;}            /*第5見出しは赤い色です。*/

HTMLファイル

HTMLファイル上では、スタイルの設定は行いません。@import url(h5.css);でh5.cssを読み込みます。;（セミコロン）を忘れずに記述してください。忘れた場合は、動作しません。

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
@import url(h5.css);            /*h5.cssを読み込んでます。*/
-->
</style>
</head>
<body>

<h5>第５見出し（赤い色です。）</h5>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第５見出し（赤い色です。）

対応状況

外部ファイルの読み込み（@import）。その２

は未対応ですので、注意して使いましょう。

スタイルシートファイルからスタイルシートファイルを読み込む（応用編）

例えば、テーブルのcssファイル、リストのcssファイル、背景のcssファイルなどを個別に作り、それぞれをひとつのベースcssファイルに読み込んで使用することも出来ます。

hn.cssファイル

この例では、@importコマンドによってh4.cssとh5.cssをhn.cssに読み込んでいます。

ソース

h1{color:green;}
h2{color:white;}
h3{color:black;}
@import url(h4.css);            /*h4.cssを読み込んでます。*/
@import url(h5.css);            /*h5.cssを読み込んでます。*/

HTMLファイル

@import url(hn.css);でhn.cssを読み込みます。

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
@import url(hn.css);            /*hn.cssを読み込んでます。*/
-->
</style>
</head>
<body>

<h4>第４見出し（青い色で中央揃えです。）</h4>
<h5>第５見出し（赤い色です。）</h5>

<address>作者名やメールアドレス</address>
</body>
</html>

インラインでの埋め込み

HTMLエレメント（タグ）内にstyleアトリビュートで設定します。よってこの場合は、セレクタはありません。styleアトリビュートの対応状況についてはHTML4.01リファレンスで個々のエレメント（タグ）をご参照下さい。
部分的にスタイルを設定したい場合などに利用します。

style=" 属性 : 値 ; "

HTMLファイル

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
</head>
<body>

<h5 style="color:green;">第５見出し（緑色です。）</h5>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第５見出し（緑色です。）

対応状況

インラインでの埋め込み

スタイルシート対応ブラウザであれば、OKです。安心して使いましょう。

divとspan（スタイルコンテナ）

インラインでの埋め込みによるスタイルの設定をする際、よく使われるエレメント（タグ）がdivとspanです。何故ならば、このエレメント（タグ）自体は物理表現も意味属性も持たないからです。要するに、これらのエレメント（タグ）で括っても何の影響も与えないのです（divは改行されますが）。

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
</head>
<body>

<div style="color:green;">divで囲むと改行だけされます。
<span style="color:red;">spanで囲むと改行もされません。</span>
分かるかな？</div>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

divで囲むと改行だけされます。spanで囲むと改行もされません。分かるかな？

スタイルシートの優先順位

同じエレメント（タグ）に複数の方法でスタイルが設定されている場合は、インラインでの埋め込みによる方法が最優先され、以下の順で優先されます。

個々のエレメントにstyleアトリビュートで直接記述する方法。（インラインでの埋め込み）
styleエレメントにスタイルを記述する方法。
スタイル・ファイル（拡張子.css）にスタイルを記述して、styleエレメントに@import url(URL)表記でスタイルシート・ファイルを読み込む方法。（外部ファイルの読み込み。その２）
スタイルシート・ファイル（拡張子.css）にスタイルを記述して、linkエレメントでスタイルシート・ファイルを読み込む方法。（外部ファイルの読み込み。その１）

優先順位は上記のとおりですが、複雑なスタイルを記述した場合には、スタイルの重複記述ミス（例えば、外部ファイルやstyleエレメントで基本スタイルを設定している場合に、無意識にインラインでもスタイルを設定してしまうミス）などが起こりやすくなります。
そういった記述ミス等を避けるために !important が用意されています。この !important を付けることにより、インラインでの埋め込みによる方法よりも最優先されます。

セレクタ { 属性 : 値 !important ; }

HTMLファイル

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
h6 {color:blue !important;} /*第６見出しは青い色が最優先です。*/
-->
</style>
</head>
<body>

<h6">第６見出しは青い色です。</h6>
<h6 style="color:green;">!importantを付けると、
インラインの設定よりも最優先されます。</h6>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第６見出しは青い色です。

!importantを付けると、インラインの設定よりも最優先されます。

対応状況

!important

は未対応ですので、注意して使いましょう。