CSSの基本：3つの書き方（適用方法）

CSSをHTMLに適用するには、主に3つの方法があります。基本は「1. 外部ファイル」を使いますが、テストや特殊なケースで他の2つも使われます。

1. 外部ファイル（class指定） ※基本形

HTMLで名前を付け、外部の style.css などで呼び出す最も一般的な方法です。

<!-- HTML側 -->
<p class="sample-text">テキスト</p>

/* CSS側 */
.sample-text { color: blue; }

2. styleタグで書き込む（内部参照）

HTMLの <head> 内に <style> タグを作って直接書く方法です。そのページだけに適用したいスタイルがある時に便利です。

<head>
  <style>
    h2 { color: darkcyan; }
  </style>
</head>

3. タグの中に直接書く（インラインスタイル）

HTMLタグの属性として style="..." と書き込みます。最も優先順位が高い書き方です。

<p style="color: red; font-weight: bold;">
  この一箇所だけ、どうしても赤く太くしたい！
</p>

使い分けのポイント

現場での使い分け基準
インラインスタイルの注意点

インラインスタイルを多用すると、CSSファイルでいくら指定を変えても上書きできなくなります（優先順位が強すぎるため）。「どうしても」という時以外は避けるのがプロの作法です。