CSSファイルを作って定義する方法

HTMLファイルとは別にCSSファイル、スタイルだけを記述したファイルを作っておいて、ブラウザ側でリンクして表示するという方法です。

<head>
<link rel=stylesheet type=text/css href=cssref.css>
<head>

自分の全ページのヘッダーにこれを埋め込んでおくと、一つのCSSファイル(この場合cssref.css)のスタイル設定を変更するだけで、全ページのレイアウトを一気に更新する事ができるわけです。

CSSファイルの中身を、例えば次のように作ります。

(cssref.css)
body{
  background:white;
}

strong{
  color:red;
}

div.veryimportant{
  color:yellow;
  background:purple;
  font-size:large;
}

先述のように、ヘッダー部にCSSファイルのリンクを書くだけで次のソースは

<strong>表示テスト</strong>
<div class=veryimportant>表示テスト</div>

表示テスト

表示テスト

このように表示されます。

この例ではタグにclassオプションをつけていますが、これもスタイルシートに関係のあるものです。それではここでスタイルシートの書式を説明しましょう。