@ CSS

HTML文書にCSSを適用する

HTM L文書に CSS を適用するには、以下のような3種類の方法があります。

1. link 要素で外部 CSS ファイルを呼び出して適用する

スタイルシートを記述した CSS ファイルを HTML ファイルとは別に作成して、HTML ファイル内から呼び出してスタイルを設定します。

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

2. style 要素で文書単位に適用する

HTML文書のhead要素内にstyle 要素を記述して、文書単位でスタイルを設定します。

<style">
em {
  color:green;
}
</style>

3. 要素に style 属性を記述して、要素単位で適用する。

<p style="color:red">タグ内のスタイル属性に記述してスタイルを設定します。<p>

apply.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="apply.css">
<style>
em {
  color: green
}
</style>
</head>

<body>
<h1>HTML文書にCSSを適用する</h1>
<section>
  <h2>1. link 要素で外部 CSS ファイルを呼び出して適用する</h2>
  <p><strong>スタイルシートを記述した CSS ファイルをHTMLファイルとは別に作成して、</strong>HTML ファイル内から呼び出してスタイルを設定します。</p>
</section>
<section>
  <h2>2. style 要素で文書単位に適用する</h2>
  <p>HTML文書の hea d要素内に style 要素を記述して、<em>文書単位</em>でスタイルを設定します。</p>
</section>
<section>
  <h2>3. 要素に style 属性を記述して、要素単位で適用する</h2>
  <p style="color:red">タグ内のスタイル属性に記述してスタイルを設定します。</p>
</section>
</body>

</html>

apply.css

@charset "utf-8";
h1,
strong {
  color:blue
}

demo