CSSを全てのページに適用

これまでの説明は、スタイルの定義をHTMLファイルに記述するものでしたが、スタイルの定義を別のファイル（CSSファイル）に記述しておき、Webページに適用する方法を説明します。スタイルの定義をCSSファイルに記述しておくことで、どのページにも一貫したスタイルを適用することができます。これで、かなりの手間と時間を省くことができます。

CSSファイルにスタイルの定義を記述しておきます。HTML側には、CSSファイルを読込むように設定しておきます。これで、どのページにも一貫したスタイルを適用することができます。

例えば、CSSファイルに「<h2>の文字色を赤にする」スタイルを記述しておけば、どのページに対しても<h2>の文字色は赤になります。

CSSファイルを読込むように設定

この段階では、まだCSSファイルを作成していませんが、とりあえず、HTML側でCSSファイルを読込む設定をしておきましょう。

CSSファイルを読込むようにするには、<head>要素に、<link>タグを使用します。

sample.html


<html>
    <head>
        <link rel="stylesheet" type="text/css" href="page_styles.css" />
        <title>タイトル</title>
    </head>
    <body>
        <h2>外部スタイルシートの読込</h2>
        <p>page_styles.cssを読込
        </p>
        <h2>チェック</h2>
        <p>うまく読込まれるでしょうか。
        </p>
    </body>
</html>