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オプションをつけていますが、これもスタイルシートに関係のあるものです。それではここでスタイルシートの書式を説明しましょう。