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

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

CSSを記述する場所
１．外部のCSSファイルを指定
２．styleタグを作成し(<style>-</style>)その中にCSSを記述
３．インラインスタイル
HTML5で不要になったmetaタグ

CSSを記述する場所

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

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

１．外部の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

２．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

３．インラインスタイル

インラインスタイルです。
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タグです。

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