(1) インラインスタイルシート
インラインスタイルシートは、HTMLタグに「style=」に続けて CSSプロパティと設定値を書き入れます。
上記の 9行め「<p>」を「<p style="color: red;">」と変更してみると、文章の色が赤色になります。
(2) 内部スタイルシート
内部スタイルシートは、<head>タグにまとめて CSSを書き込む形式です。
<head>内に <style>タグを作成し、その中に CSSを書きます。
これを Webブラウザで表示すると、先ほどと同じになります。
(例)
<head>
<title>@@@@@@</title>
<style>
p{
color: ####;
background-color: lightblue;
}
</style>
</head>
<body>内に複数の <p>タグがあるとき、すべて共通のスタイルが適用されるようになります。
この形式の欠点としては、いろいろなタグにスタイル設定をしていくと、<head>~</head>部分が長くなり、<body>内を編集するときでもスクロールを繰り返さなければいけないことでしょうか。
また、1つの Webページ全体には適用できますが、複数の Webページに共通して適用したときはそれぞれの Webページに同様の記述をしないといけません。
(3) 外部スタイルシート
CSSファイルを別途用意して、HTMLファイルで読み込む形式です。
下図のように「style.css」という名の CSSファイルを作成します。(ファイル名は任意)
(例)
p{
color: ####;
background-color: lightblue;
}
そして、HTMLファイルにその「style.css」ファイルを参照する設定を <head>タグ内に記述します。
(例)
<head>
<link rel="stylesheet" href="style.css">
<>
この外部スタイルシートによる方法は、複数の HTMLファイルで構成される Webページであっても 1つの CSSファイルでまとめてスタイル設定ができます。
(もちろん、別々の CSSファイルを適用することもできます。)
現在では、Webページの文書内容を HTMLファイルで、そのスタイルを外部の CSSファイルで記述する形式が多く採用されています。