CSSの記述方法は3種類

１．style要素として記述
２．style属性として記述
３．拡張子.cssの外部ファイルに記述

##１．style要素として記述
###ポイント
head要素、body要素のどちらに記述してもいいけど、head内が推奨されてる。

###メモ
＜style type="text/css"＞の「type="text/css"」は付けなくても問題なし。

例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>style要素として記述</title>

<!--ここから-->
<style>
h2 {
color: red;
}
</style>
<!--ここまで-->

</head>
<body>
ここに記述しても適用される
<h1>テキスト</h1>
<h2>テキスト</h2>
</body>
</html>

##２．style属性として記述
###ポイント
html内の要素に直接記述する。変更があると全部の要素を書き直さないといけないので大変。

例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>style属性として記述</title>
</head>
<body>

<!--ここから-->
<p style="font-size: 25px;">
      テキストテキストテキスト
</p>

<p style="font-weight: bold;">
      テキストテキストテキスト
</p>
<!--ここまで-->

</body>
</html>

##３．拡張子.cssの外部ファイルに記述
###ポイント
head要素にlink要素で追加する。
cssファイルの中身は先頭に「@charset "utf-8";」などの文字コードを追加する以外は1のstyle要素の記述方法と同じ。

例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拡張子.cssの外部ファイルに記述</title>

<!--ここから-->
 <link rel="stylesheet" href="ファイル名.css">
<!--ここまで-->

</head>
<body>
<h1>テキスト</h1>
<h2>テキスト</h2>
</body>
</html>

例）「ファイル名.css」の中身

@charset "utf-8";

h2 {
color: red;
}

SAMURAI ENGINEER Plus + https://www.sejuku.net/plus/programs/4/chapters/26