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

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

目次

CSSを記述する場所

CSSを記述する場所は3つあります。

  1. 外部のCSSファイルを指定します。
    →1つのCSSのファイルで複数のHTMLファイルにCSSを適用することができます。
  2. HTML内にstyleタグを作成し(<style>-</style>)その中にCSSを記述します。
  3. インラインスタイル。htmlの要素の中にstyleタグを追加しそこにCSSを記述します。

 

1.外部のCSSファイルを指定

外部のCSSファイルを指定する方法です。
6行目は、link要素の中で外部の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行目で指定した、sytle.cssファイルです。
1行目の@charasetは、ファイルの文字コードを指定しています。

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

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

テスト1

テスト2

テスト3

 

2.styleタグを作成し(<style>-</style>)その中にCSSを記述

HTML内にstyleタグ(<style>-</style>)を作成しその中にCSSを記述する方法です。
6-13行目は、styleタグで囲っています。その中に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>

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

テスト3

テスト4

テスト5

 

3.インラインスタイル

インラインスタイルです。
htmlの要素の中にstyleタグを追加しそこにCSSを記述します。
8,9行目では、p要素の中に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>

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

テスト6

テスト7

テスト8

 

HTML5で不要になったmetaタグ

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

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

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

関連の記事

CSSを適用する優先順序のサンプル
CSS スタイルの継承のサンプル(inherit)
カラーコードの一覧表(Webページの色)



△上に戻る