CSSを記述する場所のサンプル

CSSを記述する場所についてです。

場所	１．外部のファイルにCSSを記述する
	２．HTML内部でCSSを記述する
	３．タグ内でCSSを記述する
	CSSファイルが別のCSSファイルを読み込む(@import)
	HTML5で不要になったmetaタグ

１．外部のファイルにCSSを記述する

外部のファイルにCSSを記述する場合、linkタグを使用します。
linkタグは、head部に記述します。
hrefは、外部のCSSファイルのURLを指定します。
relは、リンクのタイプです。スタイルシートなので"stylesheet"と記述します。
外部のCSSファイルは、複数のHTMLファイルにCSSを適用できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <p class="t1">テスト1</p>
    <p class="t2">テスト2</p>
    <p>テスト3</p>
  </body>
</html>

6行目は、link要素の中で外部のCSSファイルを指定しています。

外部ファイル

@charset "UTF-8";
.t1{ 
    color:blue; 
}
.t2{ 
    background-color:Lavender;
}

6行目で指定した、sytle.cssファイルです。
1行目の@charasetは、ファイルの文字コードを指定しています。

２．HTML内部でCSSを記述する

HTML内のhead部にstyleタグを記述しそこにCSSを記述します。
CSSは、そのhtmlだけに適用されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
    <style>
      .t3 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="t3">テスト3</p>
  </body>
</html>

6～10行目は、styleタグで囲っています。その中にCSSを記述しています。

３．タグ内でCSSを記述する

<タグ style="CSSを記述">

タグの中にstyle属性を追加しそこにCSSを記述します。
インラインスタイルといいます。
CSSは、style属性があるタグ内に適用されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
  </head>
  <body>
    <p style="background-color: PaleGreen">テスト7</p>
    <p>テスト8</p>
  </body>
</html>

8行目では、p要素の中にstyleタグを追加してCSSを記述しています。

CSSファイルが別のCSSファイルを読み込む(@import)

@importで他のCSSファイルをインポートできます。

読み込み元のファイル(sytle1.css)

@charset "UTF-8";
@import url("./style2.css");
.p1 {
  background: yellow;
}

2行目は、style2.cssを読み込んでいます。

読み込み先のファイル(sytle2.css)

@charset "UTF-8";
.p1 {
  color: red;
}

HTML5で不要になったmetaタグ

HTML5では、CSSがデフォルトのスタイルシートになっているため不要です。
HTML4.01では、このmetaタグはデフォルトのスタイルシートの言語を指定していました。