(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ファイルで記述する形式が多く採用されています。