HTMLにCSSを適用（読み込ます）させる方法は３つあり、それぞれCSSを書き込む場所が違います。
- 内部スタイルシート：HTMLファイルの<head>内にCSSを書き込む方法
- インラインスタイルシート：HTMLタグに直接CSSを書き込む方法
- 外部スタイルシート：「.css」の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませる方法
表示させるページが1枚～10枚程度の小規模なWebサイトの制作なら「内部スタイルシート」や「インラインスタイルシート」でつくる方が効率の良い場合がありますが、一般的によく使われている方法は「外部スタイルシート」です。
では、前回までの説明で使用した「ステーキハウス」を基に説明していきます。それぞれCSSを書き込む場所と適用の方法を変えて「サーロインステーキ300ｇ」の文字を赤字の40pxにします。
内部スタイルシート
HTMLファイルの<head>内にCSSを書き込む方法。↓↓「CSS構文の基本」で説明。
この方法は、CSSを記述したHTMLファイルだけに適用されるので、複数のHTMLファイルには反映されません。
特定のページだけにデザインを付け加えたい場合などに使えます。
【適用方法】
HTMLファイルの<head>内に<style>タグを追加しその中にCSSを書きます。
セレクター（HTMLの要素名）を「p」としているので、以下の<body>内の「p」すべてに適用されます。
インラインスタイルシート
HTMLタグに直接CSSを書き込む方法で、直接書かれたタグにだけ適用されます。1つひとつのタグに書き込むのに手間がかかり、メンテナンスも難しいといった問題があります。
この方法は、他の方法でCSSを適用させるより優先度が高いため、一部のデザインだけを変えたい場合に使えます。
【適用方法】
HTMLのタグ内に直接CSSを書き込みます。今回の場合<p>タグ内にstyle属性を使って指定しています。
外部スタイルシート
「.css」の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませる方法で、この方法が最も一般的な方法です。1つのCSSファイルを複数のHTMLファイルに読み込ませられるので、一括管理できます。
修正したい場合も1つのCSSファイルを変更するだけですべてのHTMLファイルに反映できるので大変便利です。
【適用方法】
「外部スタイルシート」の場合はCSSファイルが必要になるので↓↓の記事を確認してください。
この記事で説明している通りに「style.css」があるでしょうか。
HTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。href属性にCSSファイル（今回作った「style.css」）、rel属性に「stylesheet」と指定すれば、「style.css」が適用されます。
CSSファイル内に、セレクター（HTMLの要素名）で、HTMLの要素を指定します。{ }内に色の指定と文字の大きさの宣言をします。
次回は“Visual Studio Community”を使いCSSファイルの作り方を説明します。
