前のページでも書いたようにスタイルシートは外部ファイルに記述して、HTMLファイルを表示する際にスタイルを呼び出し反映させる事ができます。この方法を一般的に外部スタイルシートと呼ぶのですが、複数のHTMLファイルに対して同一のスタイルシートファイル（以下CSSファイル）を呼び出すようにしておけば、一括で複数ページのデザインを編集できるというメリットがあります。
外部CSSファイルを作る場合は、一旦メモ帳などのテキストエディタを起動させて何も入力せずに保存して下さい。そしてファイル名に「***.css」と付けます。「***」の部分は半角英字であれば何でも構いませんが、拡張子の部分は「css」にしておきます。CSSファイルの編集は、できればメモ帳ではなく、もう少し高機能なテキストエディタがいいのですが、メモ帳で開く場合はCSSファイルを右クリックしてプログラムの変更で一覧からメモ帳を選択します。
CSSファイルにスタイルシートを入力する場合は以下のような記述になります。
/* body設定 */
body {
font-size : 15px ; color : #020248 ; margin : 0 ; padding : 0 ;
}
一番上の赤い部分は使用している文字コードで、記述自体は絶対必要というわけではないので省略して構いません。次に青い部分はCSSファイルのコメントアウトになり、何のスタイルを設定しているかなどのメモを/* から */の間に自由な文章で書き込んでおく事ができます。そして最後の緑の部分がスタイルになります。前ページで<head>〜</head>内に挿入したCSSと基本は変わりませんが、外部CSSファイルに記述する場合には、HTMLで使用されていた<!-- -->は記述しません。
外部CSSファイルに記述したスタイルをページに反映させるには、各ページの<head>〜</head>内に以下の記述をしておきます。この記述のあるページのみ、スタイルが反映される事になります。
もうお分かりだと思いますが、赤い部分に先ほど作成したCSSファイルのファイル名を入力します。各ページに上の記述を加えておく事によって、スタイルを変更する場合は外部スタイルシートのファイルを編集するだけで、全ページのスタイルを一括で変更できるようになります。
CSSは一つに纏めたスタイルを色々な要素に対し使い回す事ができます。例えばテーブルに余白を10pxずつとって、ボーダーを1pxの青にして・・・なんて沢山指定していく場合、同じテーブルを作るのに一からスタイルを記述していくのは非効率的です。そこで外部CSS（head内でもできます）に記述したスタイルをclassを使って呼び出す方法をちょっとだけ説明します。
まず外部CSSにスタイルを以下のようにして記述しておきます。
font-size: 30px; color: #FFFFFF; background-color: #FF0000;
}
ちょっと見えにくいですが先頭に「.」（ドット）があり、その後ろの赤い部分がclass名になります。class名になる部分は半角英字で好きな名前を付けておき、HTMLファイル内に記述してある <p>タグなどの要素には「class="付けた名前"」というように記述します。
これで設定しておいたスタイルが適用されるのですが、同じスタイルを使用したい場所の要素に対して、同じように記述すれば何度も使い回す事が可能です。現バージョンのalphaEDITではWYSIWYGからclassを指定する事はできないので、直接HTMLソースから編集する必要があります。