cssをhtmlで読み込む方法

HTMLとCSSのファイルを編集して、「よし！ブラウザで確認しよう」と思った時、「あれ？CSSが適応されていない・・・」となってしまったことがあったので、cssをhtmlで読み込む方法について記述していきます。

例えば、こんな画面があるとします。

f:id:khirok:20191228112233p:plain

HTMLはこちらです。

<!DOCTYPE html>
　<html>
　　<head>
 
　　</head>
　　<body>
　　　<div class="test">
 　　　　test
　　　</div>
　　</body>
　</html>

CSSはこちらです(ファイル名：　css_import.css)。

.test {
　　height: 100%;
　　width: 200px;
　　background-color: moccasin;
　　margin: 300px auto;
　　font-size: 100px;
　　padding: 3px 50px;
　　border-radius: 100px;
　}

CSSが適応できていない状態です。

これは、htmlの<head>タグ内に次の記述を追加することで解決できます。

<link rel="stylesheet" href="css_import.css">

ブラウザはこちらです。

f:id:khirok:20191228113029p:plain

CSSが適応されました！

以上。