実際にファイルに教科書の例を書き込み，確認します． 確認用の文書 wtest.html を作成してください． 新しい HTML 文書を作成する場合， head 要素などにコピーする必要がある部分が多いので， index.html などをコピーしてからそれをもとに作成すると楽です．
「スタート」→「プログラム」→「アクセサリ」のメモ帳から ネットワークドライブの index.html を開き，「ファイル」→「名前を付けて保 存」でネットワークドライブの html 直下に wtest.html として保存しま す．body 要素内などの不用な部分を削除し， head 要素内などで変更の必要のある部分を変更します．
上の例で，例えば h1 のスタイル設定の中で color: white; とあるのは h1 というセレクタの clolor というプロパティ に white という 値 を設定している．
この授業では外部ファイルによるスタイル設定を用いる． index.html に挿入した
<link rel="stylesheet" href="mystyle.css" type="text/css">
は，CSS を利用し， mystyle.css というスタイルシートを使用するという意味である．
でき合いの要素をさらに細かく分類して別の指定を与えることができる．
h1.title{color: red}
と書けば，h1 すべてではなく，下記のように
<h1 class="title">この見出しはタイトル</h1>
class="title" と指定された h1 要素の文字だけが赤文字になる． 同様に要素タイプの後ろに#を挟んでidを書くことで id 属性で有効範囲を限定することができる．
疑似クラスセレクタ，疑似要素セレクタについては教科書 p.71 を読み，実験してみること．
カスケーディングスタイルシートの特徴として
があげられる．
優先順位は 3 つの尺度がある． 迷ったときは教科書 p. 74 図 6.3 をよく見て判断すること．
だれの設定したスタイルか
指定範囲の限定の度合
読み込み順序
教科書 p.74 例 6.16 では p 要素の文字色を青に， em 要素の文字を大きくするように指定している． この場合，p 要素の子要素の em 要素では，p 要素に対する指定である 「青文字」を継承し，「文字を大きく」という指定が追加される． この継承の機能によって繁雑にならずに自然に指示を記述することができる．
CSS の文法は W3C CSS 検証サービス を利用してチェックください．
スタイルシートを利用したサイト全体の設計について説明します．
スタイルシートの優先順位を利用して，
にスタイルの指定を与える．数字の大きいものほど限定されているため 優先されるべきである．読み込み順による優先順位をうまく利用すること． 1,2 はともに外部ファイルを使うとよいが， head 要素でのスタイルシートファイルの指定で 2 を後に指定すれば優先される． この設計方針で統一感と個性が出せる．
link 要素の media 属性で， メディアに応じて別のスタイルシートを適用させることが可能である．
class 属性の名前は "green" など即物的なものを避けること． 後に色を変更したくなった時のことを想像してみよ．
スタイルシートのコメントは C 言語と同じ記法で "/*" と"*/" で囲む．適宜注釈を入れること．
class 属性を使って独自に設定した意味づけはスタイルシートなしでは表現でき ない．スタイルシートなしでも情報が伝わるように注意せよ．
CSS1 の主なプロパティについて説明します．
長さの単位として通常 "em" と "%" を使う．
色の指定は教科書 p.79 にあるように，色名で指定することも， RGB の値で指定することもできる． RGB の値は教科書著者による The Quick Color Table を利用すると便利である．
ミニレポート第 4 回課題を出題します． 課題を良く読んで指示に従ってください．