まとめ
- インラインスタイルシート方式
HTMLタグに直接CSSを記述する - 内部スタイルシート方式
HTMLのheadタグ内にstyleタグを作成し、CSSを記述する - 外部スタイルシート方式（推奨）
CSSファイル（拡張子:.css）を作成し、CSSを記述する
HTMLのheadタグ内にlinkタグを作成し、CSSファイルを参照できるように設定する
インラインスタイルシート方式
HTMLタグに直接CSSを記述する
テンプレ
<p style="color: red;">今日は<span style="font-size: 25px;">晴</span>です。</p>
color=赤
font-size=25ピクセル
複数のCSSを記載
<p style="color: red; font-size: 16px; margin-top:5px;">今日は<span style="font-size: 20px;">晴</span>です。</p>
color=赤
font-size=16ピクセル
margin-top=5ピクセル
内部スタイルシート方式
HTMLのheadタグ内にstyleタグを作成し、CSSを記述する
テンプレ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- head内の<style></style>に記述 -->
<style>
.container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
外部スタイルシート方式
CSSファイル（拡張子:.css）を作成し、CSSを記述する
CSSファイル側（例）
@charset "UTF-8";
セレクタ1{
プロパティ1:値;
プロパティ2:値;
...
}
セレクタ2{
...
}
CSSファイル側
@charset "UTF-8";
h1{
color:red;
}
h2{
color:blue;
}
HTMLのheadタグ内にlinkタグを作成し、CSSファイルを参照できるように設定する
htmlファイル側（例）
<link rel="stylesheet" href="CSSファイルの格納場所">
htmlファイル側
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- head内に読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>