HTMLにCSSを組み込むには3つの方法があります。
1.link要素を使って読み込ませる。
2.style要素を使ってHTMLの中に直接CSSを書き込む。
3.style属性を使用して属性値としてCSSを書き込む。
メンテナンス性が落ちるので2と3の方法はあまり使われないそうですが、
練習のためやってみます。
1.link要素を使ってCSSファイルを読み込ませる
sample1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
2.style要素を使ってHTMLの中に直接CSSを書き込む
sample2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル2</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<h1>サンプル2
</h1>
</body>
</html>
すごい文字化けしました。
meta要素で文字コード指定してるのになあなんでだろうなあと思ってたら
HTMLファイル自体をSJISで保存してたからでした。
エディタでコードをUTF-8に直し保存。
やったぜ！
3.style属性を使用して属性値としてCSSを書き込む
sample3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル3</title>
</head>
<body style="background : orange;">
<h1 style="color : white;">サンプル3</h1>
</body>
</html>
で問題なく表示されました。