CSSファイルの作成

HTMLファイルから読込まれる側となる、CSSファイルを作成しましょう。

スタイルの指定方法については、次ページで説明しますが、これまでの説明で出てきた方法とほぼ同じです。具体的には、次のように記述します（「:」と「;」の入力ミスに気をつけてください）。

page_styles.css

<h2>要素に対して、前景色（文字色）を赤に、背景色を黄色に設定しています。<p>要素に対しては、前景色（文字色）を青に設定しています。

上の例のように記述したら、CSSファイルとして保存しましょう。前ページの例では、同じディレクトリにあるCSSファイルを読込む設定をしたので、同じディレクトリ内に保存します。拡張子は「.css」とします。ここでは、「page_styles.css」というファイル名で保存します。

CSSファイルを保存します。HTMLファイルの<link>タグのhref属性で指定したパスに保存します。 ここでは、同じディレクトリに「page_styles.css」というファイル名で保存します。

確認してみましょう

CSSファイルを保存したら、前ページでCSSファイルを読込むように設定したHTMLファイルを開いてみましょう。下の入力例は、前ページの例です。

このHTMLファイルを開いて確認してみましょう。

sample.html

HTMLファイル側で、CSSファイルを読込む設定さえしておけば、そのページにはCSSファイルで定義したスタイルが適用されるようになります。

試しに、前ページの例で作成したHTMLファイルのコピーをいくつか作って、ブラウザで開いてみてください。どのファイルに対しても、<h2>と<p>要素に対してスタイルが適用されるはずです。

この方法であれば、<link>タグを指定するだけの手間と時間だけで済みますし、どのページに対しても、統一したスタイルを適用することができるので、通常はこの方法でスタイルを適用するようにしましょう。

まとめ

全てのページに適用

ページの先頭

スタイル指定の記述法