CSSファイルの設定
CSSはHTML内に書くこともできますが、外部に別にCSS用のファイルを作ってそれをリンクさせることもできます。 外側に作るものを外部スタイルシート等とよびます。
スタイルの様々な指定をHTML内に書くのはページサイズが増える、あるいはサイト全体のデザインを一括して管理するなどの利点が生かせません。 そのため外部スタイルシートを使ってデザイン部分を切り離すほうが色々なメリットがあるので、外部スタイルシートを作るという前提で説明します。
なおタグに関してはHTMLの進化系といえるXHTMLの記述にしています。多少記述は違います、特に基本的にすべてのタグに/の終了があるとか大文字、小文字の違いがあるとかです。基本的にすべて小文字です。
外部スタイルシートをHTMLにリンクする方法
リンクする方法その1
外部スタイルシートはたとえばsample.cssのように後ろにcssをつけたファイル形式になります。それがHTMLに反映するようにリンクしますが、ページのヘッダー部つまり<head>～</head>で囲まれた部分に次のように記述します。
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
スタイルシートのリンクとしてはこれが一番使われていると思います。またスタイルシートは何種類かに分けて同様のリンクでいくつでもリンクできます。 つまりスタイルシートが大きくなりそうとか分けたほうが管理しやすそうな時などにはいくつかに分けて、使う部分だけリンクするということもできると言うことです。私のサイトのテンプレートもこの方法です。参考にご覧ください。
また読み込むスタイルシートがいくつもある時は、＠import命令で一つのスタイルシートでまとめて読み込むということもされています。
リンクする方法その2
HTML内には<style type="text/css">～</style>で囲んだ部分に直接スタイルを書き込むことができますが、＠import命令を使ってCSSファイルをリンクすることも出来ます。ヘッダー部、<head>～</head>で囲まれた部分に次のように記述します。
<head>
<style type="text/css">
@import"sample.css";
</style>
</head>
これはページ毎に違う種類の複数のCSSを読み込たい時などに便利な方法です。なお<style type="text/css">～</style>内に直接スタイルをそのまま記述することは、長くなってHTMLのサイズも大きくなるので一般にはあまり行われません。