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

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

目次

場所 1.外部のファイルにCSSを記述する
  2.HTML内部でCSSを記述する
  3.タグ内でCSSを記述する
参考 HTML5で不要になったmetaタグ

1.外部のファイルにCSSを記述する

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

外部のファイルにCSSを記述するサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
    <link href="style.css" rel="stylesheet" />
    <style></style>
  </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は、ファイルの文字コードを指定しています。

上記コードの実行結果です。

テスト1

テスト2

テスト3

 

2.HTML内部でCSSを記述する

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

HTML内部でCSSを記述するサンプルです。

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

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

上記コードの実行結果です。

テスト3

テスト4

テスト5

 

3.タグ内でCSSを記述する

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

タグ内でCSSを記述するサンプルです。

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

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

上記コードの実行結果です。

テスト6

テスト7

テスト8

 

HTML5で不要になったmetaタグ

<meta http-equiv="Content-Style-Type" content="text/css">

上記はHTML5で不要になったmetaタグです。

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

関連の記事

CSS セレクタの優先順位
CSS スタイルの継承のサンプル(inherit)
カラーコードの一覧表(色を調べる/色を作る)

△上に戻る