今回からはCSSを実際にHTMLファイル中に記述していきます。
記述する方法としては「直接タグに記述する方法」と「直接タグに記述しない方法」の２種類があります。

あまりに長くなるので、今回と次回の2回に分けていきます。

まずは以下のサンプルをご覧ください。


上のサンプルのうち、それぞれ赤字の部分は「<style>タグ」、緑字の部分は「コメントタグ」、紫字の部分は「style属性」となっています。

それでは順番に解説していきます。

<style>タグは、その名の通り「スタイルシート」を記述するためのタグです。
今回の例ではtype属性も一緒に記述しましたが、よく分からなければ書かなくてもいいです。
どうしても書きたい場合は、type属性の値に「text/css」を指定しましょう。

今回の例では<style>タグの中になぜかコメントタグがありますが、これはスタイルシート非対応のブラウザでスタイルシートがそのまま表示されるのを防ぐためです。
このようにコメントタグで囲むことによって、スタイルシート非対応のブラウザでスタイルシートが表示されないように防ぐことができます。

また、HTML内の各タグにスタイルシートを個別に設定する場合は、style属性を使って設定しましょう。
こうすることによって、各タグ個別にスタイルシートを適用させることができます。
ちなみにstyle属性を使用するときはプロパティと値のみで、セレクタは必要ありません。
もちろんstyle属性を使う時もプロパティと値を複数設定することができます。