【ご案内】このページの内容は、AI（GPT）が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。
このページでは、文字の色を指定する CSS プロパティ color と、CSS を HTML に追加する 3 つの方法を説明します。
color プロパティは、文字の色（テキストカラー）を指定するための CSS のプロパティです。
例 赤色にしたいときは、color red; や color #ff0000; のように指定します。
HTML に CSS を追加する一般的な方法は、次の 3 パターンです。
（1）インラインスタイル（タグの中に直接書く）
（2）内部スタイルシート（head 内の style に書く）
（3）外部スタイルシート（別ファイルを link で読み込む）
インラインスタイルは、HTML タグに直接 style 属性を書いて指定する方法です。
書き方の例は次のとおりです。
<h3 style="color: red;">赤い見出し</h3>
実際の表示例は次の見出しです。
この方法は、少しだけ色を変えたいときなどに便利ですが、たくさん使うとコードが読みにくくなります。
内部スタイルシートは、head タグの中に style タグを書き、その中に CSS をまとめて書く方法です。
このページの head 内では、h2 と p に対して color を指定しています。
書き方の例は次のとおりです。
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<style>
h2 { color: blue; }
p { color: #333333; }
</style>
</head>
CSS は、原則として「上から順番に」読み込まれます。
そのため、同じ要素に対してあとから書かれた CSS が、前に書かれた CSS を上書きすることがあります。
通常は、このページのように head の上の方（meta や title のあと）に style を書くことが多いです。
もし head の一番下（</head> の直前）や、body の直前に近い位置に style を追加した場合も、読み込まれる順番は「上から下」なので、下の方に書いた CSS の方があとから適用されます。
例 すでに h2 { color: blue; } が書いてある下に、h2 { color: red; } と書くと、結果として h2 は赤色になります。
この性質を利用して、「最初は共通のスタイル」「下の方でページごとの上書き」というような使い方をすることもあります。
外部スタイルシートは、CSS を別ファイル（例 style.css）に書き、それを link タグで読み込む方法です。
head 内では次のように書きます。
<link rel="stylesheet" href="style.css">
そして、style.css ファイルの中に次のように書きます。
h1 { color: green; }
p { color: gray; }
この方法は、複数の HTML ページで同じ CSS を共有したいときにとても便利です。
以下は、見出しタグ h1〜h5 と color の指定例です（実際の色指定はインラインスタイルで行っています）。
ページのタイトルなどに使われる、最も重要な見出しです。
大きな章やセクションのタイトルとして使われます。
h2 の中に含まれる小さな項目の見出しとして使われます。
さらに細かく内容を分けたいときに使います。
必要に応じて、より細かい階層構造を表したいときに使います。
color プロパティを使うと、文字の色を指定できます。
CSS を追加する方法には、インラインスタイル、内部スタイルシート、外部スタイルシートの 3 パターンがあります。
CSS は上から順番に読み込まれ、下に書いたルールが上のルールを上書きすることがあります。style や link の位置も、その順番に影響します。
小さな変更にはインラインスタイル、1 ページ内で完結するなら内部スタイルシート、複数ページで共有するなら外部スタイルシートがよく使われます。