もっとも簡単なのは、タグに直接記述する方法です。下記の例では背景色が赤色になります。
<body style="background-color:red">
しかし、この方法はあまり推奨できません。なぜなら、この方法で指定した場合、すべての要素にstyle=""を付けなければならないので非常に効率が悪く、また、更新時の作業も増大します。
ヘッダー部に記述する方法は、タグ、クラス等、まとまりごとに設定を行うためレイアウトが行いやすく、ユーザーにとってもCSSの使用状況が一目で分かるので対応もしやすくなります。下記の例も背景色が赤色になります。
<head>
<style type="text/css">
<!--
body {
background-color:red;
}
//-->
</style>
</head>
<!-- //-->は内部をコメントアウトするためのもので、WebブラウザがCSSに全く対応していない場合に、<style type="text/css"></style>内をそのまま表示してしまうことを防ぐための記述です。CSS未対応(表示にではなく存在に対応していない)ブラウザはほとんど絶滅しているので、それほど気にする必要はありません。
最後に外部ファイルに記述する方法があり、もっとも使用されている指定方法で、本サイトでも特別な事情がない限りこの方法でCSSを使用しています。外部ファイルの利点は、複数のHTMLドキュメントから参照できる点にあります。Webサイト全体で同一のファイルを共有すれば、1つのファイルを書き換えるだけでWebサイト全体のレイアウトが変更できますし、サーバースペースの節約にもなります。外部CSSの指定方法は以下の通りです。他にも指定方法はありますが、混乱するので説明しません。
<link rel="stylesheet" type="text/css" href="URI">
URIは「Uniform Resource Identifier」の略で、よく使われるURLの親のようなものです。リソース(ファイル)の場所だと思って間違いありません。URIは絶対パスで記述しても相対パスで記述しても、どちらでも構いません。
ファイル名は半角英数字で、拡張子は「.css」を指定して下さい。通常「.css」と付けるというだけで、他の拡張子でも問題ないはずなので、どうしても「.css」は嫌という人は、別のものでも構いません。
外部ファイルでの記述方法は、ヘッダー部に記述する場合と同様ですが、<style type="text/css"></style>で括る必要や、コメントアウトする必要はありません。