それでは、例として「私のパソコン日記」に作成者CSSを使ってお化粧を施してみましょう。
「HTML文書に作成者CSSを適用する」ということは、「スタイルシートを別に用意し、ブラウザがそのスタイルシートを参照してからHTML文書を表示するようにする」ということです。よって、
という２つの作業が必要になります。
外部CSSファイルと言っても、HTML文書同様テキスト形式のファイルです。だからWindows付属のメモ帳で作成できます。nikki_kansei.htmlがあるフォルダと同じフォルダ内に外部CSSファイルを作成してみましょう。nikki_kansei.html（「私のパソコン日記」のHTML文書）があるフォルダを開き、ウィンドウ内の何もないところで右クリック→新規作成→テキスト文書を選択。現れたファイルの名前をここでは「nikki.css」と付けておきましょう（CSSファイルの拡張子は「.css」が一般的ですでなければなりません）。
CSSを適用したいHTML文書のhead要素内（title要素の直前でけっこうです）に、下のようなlink要素を追加します（link要素は空要素。よって終了タグは不要）。
<link rel="stylesheet" type="text/css" href="CSSファイルのURL">
今回のようにnikki_kansei.htmlとnikki.cssが同じフォルダにある場合は、nikki_kansei.htmlのhead要素内に
<link rel="stylesheet" type="text/css" href="nikki.css">
と書き加えます。これで準備はＯＫ。あとは、nikki.cssというファイルを編集していけばいいんです。（もちろん、CSSファイルを置く場所は自由です。nikki_kansei.htmlと別フォルダでもかまいません。ただその時はCSSファイルのURLの書き方に注意してくださいね。）
nikki.cssをメモ帳で開いてください（もちろんまだ何にも書かれていません）。また、nikki_kansei.htmlをブラウザで開いて、いつでも見られる状態にしておいてください。
CSSファイル内にどのように記述するかなんですが、まず原則的に「半角英数で書く」ことに留意してください。そして、
対象 { Aを:Bにする }
という形式で書きます。「Aを」と「Bにする」の間は：（コロン）です。「対象」の部分には、例えば「h1」などの要素名が入ると考えておいてください（詳細は別ページにて説明予定）。また１つの対象に複数の指定をすることができるので、
対象 { Aを:Bにする ; Cを:Dにする ; Eを:Fにする }
というように連続して書くこともできます。「～にする」の直後はすべて；（セミコロン）です。
また、２つの対象に対し１度にスタイルを指定することもできます。
対象1 , 対象2 { Aを:Bにする }
対象1と対象2の間は「, 」（コンマ）です。
さあそれでは具体例を示しましょう。nikki.cssにこう書いてみてください。
* { font-size:100% ; font-weight:normal }
対象に指定した「*」というのは、すべての要素、という意味です。だから、すべての要素の文字の大きさ（font-size）をブラウザの標準フォントサイズ（１００％）に指定し、すべての要素の文字の線の太さ（font-weight）を普通（normal）に指定したことになります。要するところ、すべての要素の文字表示方法を初期化したことになる訳です。
記述できたらnikki.cssを上書き保存したあと、nikki_kansei.htmlを開いているブラウザをアクティブ（選択状態、最前面表示）にして「最新の情報に更新」してみてください（Internet ExplorerならF5キーを押せばOKです）。すると編集後のnikki.cssを読みこんだ上でnikki_kansei.htmlが表示され、スタイルがきちんと適用されているかどうか確認できます。
そして改行した後、続いて下のように書いてみます。
body { color:#000000 ; background-color:#99CCFF ; margin-left:10% ; margin-right:10% }
（#000000や#99CCFFというのは「色」を表す番号で「色」を１６進表記したものです。「色」の指定についてはThe Quick Color Tableを用意しましたのでご参照下さい。）
上の例では、body要素全体の文字色（color）を#000000（黒）、背景色（background-color）を#99CCFF（薄い青？）に指定し、全体幅の１０％の幅だけ左右に余白（margin-left、margin-right）をとってみました。
どんどんいってみましょう。
h1 { font-weight:bold ; text-align:center ; border:white 3px dotted ; padding:5px }
h1要素である「私のパソコン日記」の部分の文字の線の太さ（font-weight）を太字（bold）にし、文字の並び方（text-align）を中央寄せ（center）にし、h1要素というブロックの境界線（border）を「白色で３ピクセルの太さで点線（dotted）で」表示し、上下左右の境界線からの距離（padding）を５ピクセルとって見易くしてみました。
h2 { font-weight:bold ; border-left:black 1em solid ; border-bottom:black 1px solid ; padding-left:0.5em }
h2要素（日付の部分ですね）の文字を太字で表示。そして左側の境界線（border-left）の色を黒、太さを１em（１emとは半角英数の大文字一文字分の幅・高さです）、一重の実線（solid）で表示。下側の境界線（border-bottom）の色は黒、太さは１ピクセル、一重の実線で表示するよう指定してみました。さらに見易いように、左の境界線との距離（padding-left）を0.5emだけとってみました。
h3 { font-weight:bold ; color:#996600 ; background-color:white ; padding-left:1em ; padding-top:3px ; padding-bottom:3px }
h3要素（日記内の見出しですね）を太字、文字色は#996600（茶系統）、背景色は白、左境界線との距離（padding-left）を１em、上下の境界線との距離（padding-top、padding-bottom）をそれぞれ３ピクセルとってみました。
p { line-height:1.5em }
p要素（各段落ですね）に対し、読みやすいように少しだけ行間をとってみました。line-heightというのは「１行の高さ」という意味です。１行の高さを半角英数大文字の1.5倍に指定することにより、行間を確保しています。
今回は一応ここまでにしましょう。nikki.cssは以下のようになっている筈です。
* { font-size:100% ; font-weight:normal }
body { color:#000000 ; background-color:#99CCFF ; margin-left:10% ; margin-right:10% }
h1 { font-weight:bold ; text-align:center ; border:white 3px dotted ; padding:5px }
h2 { font-weight:bold ; border-left:black 1em solid ; border-bottom:black 1px solid ; padding-left:0.5em }
h3 { font-weight:bold ; color:#996600 ; background-color:white ; padding-left:1em ; padding-top:3px ; padding-bottom:3px }
p { line-height:1.5em }
外部CSSファイル適用前と適用後を見比べてください。随分印象が変わりましたね。こういうようにCSSファイルを適用・編集することにより、自分だけのスタイルを自由に表現できるようになります。ちょっと、嬉しくなってきませんか？(^O^)
ここで重要な点があります。それは、見映えを決定するに際しHTML文書（のbody要素）を一切編集していない、ということです。HTML文書作成時にきちんと正しくマークアップしてから外部CSSファイルをリンクさせておけば、その後はほとんどHTML文書に触ることなく見映えを決定できますし、見映えを変更したければCSSファイルのみ変更すればよいのです。
また外部CSSファイルを１つ作成しウェブサイト内の全てのHTML文書にリンクさせておけば、サイト全体を１つのデザインに簡単に統一することができ、閲覧者にとってわかりやすいものになります。そして１つの外部CSSファイルを編集するだけで、サイト全体を模様替えすることができます。見映えを分離することでこういったメリットを享受することができるのです。
CSSのほんのさわりだけをご説明させていただきました。CSSの素晴らしさが皆さんに伝われば幸いです。