このシリーズに一貫しているように、とにかく書いてみましょう。将来への発展拡張性を保持するため、<head>〜</head>に書くことにします。こうしておけば後から中身だけ別ファイルにして（拡張子＝.css）、読み込ませる形式にするのは容易です。
<style type="text/css">
p{text-indent:1em;line-height:170%}
a{text-decoration:none;}
a:hover{color:#ff0033;text-decoration:underline}
</style>
なお冒頭と末尾の1行は以下省略します。
大事な事から注意点を書きます。HTMLと同じくすべて半角英文字で書きます。中途に半角の空白を入れたり、改行を入れても構いません。ですから良く雑誌やガイドブックには次のように書かれていますが、「単に」見やすくするだけです。私としてはちっとも見易くないんですが。
p {
text-indent : 1em ;
line-height:170%
}
これで最初のCSSの1行目と同じ事になります。どうぞ自分で分かりやすい方法でお書き下さい。
その筋の書籍を見ると、セレクタ { 属性 ： 値 } という説明があります。
セレクタとはスタイルシートを適用するHTMLの「タグ」と考えて良いでしょう。ここでの例ではｐというタグに指定を行います。上記の方法では、基本的には全てのｐに指示が適用されます。
それに続いて { 〜 } という形のカッコで、指示内容を囲みます。
属性と値の間には ： を書きます。
ここではtext-indentが属性です。段落の開始位置をどうするかを設定する「属性」を表します。フォントに関する幾つかの「使えそうな」属性を紹介します。
複数の指示を一つのセレクタに指示する時は、；で初めの指示を終了させて次の指示を続けます。
全てのタグに同一の指示を適用したくない時は、ドット（.）を最初に書いて任意のクラス名を決めて指示します。クラスの名前は何でも良いのですが、「意味のある名前」の方が後々混乱しなくて便利です。
.red { font : #ff0000 }
その上で適用したい部分にclass="red"と指示します。
class="red"と指示するには、何らかのタグの中に半角空白を打ってから続けます。例えば<strong class="red">〜<strong>とすれば〜の部分が、「強調」された上に赤で表示されます。
しかし「強調」はしたくなくて、ただフォントを赤色表示させたい場合は、タグがありません。そういう場合は<span class="red">〜<span>と書きます。HTMLには「インライン系」要素と「ブロック系」要素とがあります。
インラインとは、文字通り文章の途中に位置する「部分」と考えて良いでしょう。インライン系要素は、次に述べるブロックの中に書かなければなりません。
インライン系要素には以下のものがあります。
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
インライン系要素の「一部分に」スタイルを指示したければ、書き方 5のようにspanを使います。しかし出来るだけ何かのタグと組み合わせるのがスマートです。他に方法が無い場合だけspanを使いましょう。
この箇所を<span class="red">赤にします</span>。
ブロックとは、pで囲まれた段落やtableなどの、ともかく「ひとかたまりになった」ものを言います。ブラウザーで表示させると改行されて段落が変わるのが、ブロックです。
ブロック系要素には以下のものがあります。
address, blockquote, center, dir, div, dl, fieldset, form, hx, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
複数のブロックにスタイルを指示したければ<div>〜</div>にclass="*"を付けて「ブロック」を囲ってやります。
これもspanと同様に、一つのブロックだけに適用するならdivは必要ありませんね。当のタグに直接classを指定してやればよいのです。
<div class="red">
<h2>目次</h2>
<p>この段落と・・・</p>
<p>この段落をまとめて赤にします</p>
</div>
Netscape4.*のCSS実装が酷いとは聞いていましたが、CSSを使ってHTMLに装飾を施そうとすると、絶望的になってきます。以前「パソコン日記」に書いた内容から引用して再録しておきます。
2001年4月1日(日)、2日（月）からの引用
Netscape4.7で変に見える原因が判明。悲しい事に、N4.xはスタイルシートからではなく、読み込んだHTMLファイルから相対URLを測るのだ。これは絶対に私が悪い書き方をしているのではなくて、Netscapeがいけない。また、「見出し」に指定したtransparentが無視されるのも、背景に画像が指定されていると生じるバグ。
Netscape6はエラーの連発で起動すら出来なくなってアンインストールしてしまったので、確認できないが直っているのでしょうか。しょうがないので、CSSを適用するフォルダー内のCSSに同名の指定を書き足してやって、そこから上位フォルダーに相対指定をしてやり、一応背景画像は貼れた。背景色に関する問題は、IEユーザーが見苦しくなるので一旦断念した。ちょっと考えて、背景色指定を削除。正式のCSSでなくなって、CSS Validatorでは警告が出るが、仕方ない。W3Cから警告を受けるべきは私ではなくNetscape社なのだ。それにしても普段Netscapeでブラウズしている人は、ヘンテコな表示に慣れているのだろうか？
IEの独自仕様も問題ではあるが、blinkにしてもmarqueeにしても無視されるだけだからまあ良いのだが、背景色の問題は文字が読めなくなっちゃうので事情が違うように思う。
そもそも「現代の」ウェブ・ページというものは、HTMLが文章の中身を担当し、見栄えに関する事はスタイルシートが担当すると「国際的ルールの指針」が定めている。しかもスタイルシートは当のウェブ・サイト全体に「統一した見栄え」を簡単に与える事が出来るようになっているのだ。
ウェブ・サイト全体の「第一段階の見出し」の大きさやフォントのスタイル、改行幅、左端からのマージンといったものが統一されていると、読み手にとって歓迎されるであろうし、何より綺麗ですっきり見える。こうした事を一々のページで指定してやるためには、そのページごとにスタイルシートを書いてやらなくてはならない。それにレイアウトを変えようとしたら、一ページごとにそうした指定を書き換えてやらなければならない。
これではスタイルシートの魅力は激減する。そこで一つのスタイルシートを複数（あるいは自分のページの全て）のページに「取り込ませて」「見栄えを」指定してやる方法が、広く行われている。これならレイアウト変更も、スタイルシートだけを書き換えてやれば、適用されているページ全てが一挙に変えられる。
ここで問題になるのが、ページ数が多くなったウェブ・サイトというものは、テーマごとにフォルダーに分類してHTMLファイルを保存しているという事である。すると異なるフォルダーに入っているページに、（例えば）同一の写真ファイルを、スタイルシートを使ってページの背景画像に指定する、等ということをやろうとすると、Netscape ではそれが出来ない事になる。
スタイルシートで画像ファイルを指定してやるというのは、珍しい事ではなくて、全面の背景に画像を張るだけではなく、「ブロック要素」という一区画の背景だけに画像を使うといった方法もある。また HTML で背景画像を指定するという、上に述べた「推奨方針」に反する事も出来はするが、スタイルシートを使えば、背景画像を固定して手前の文字列だけをスクロールさせるとか、画像を縦又は横方向にだけ繰り返すといった指定もわずか一行の指定で出来る。
こうした指定をする際には、「スタイルシートから見た」その画像の位置を URL というネット上の住所で指定しなくてはならない。その際フル・アドレスは使えないのだ。www.saiton.net のどこそこの何フォルダーのどのファイルという書き方は出来ないのだ。そうでは無くスタイルシートから見て同じ階層、あるいは上位、下位にあるフォルダーのどのファイルという書き方をしなければならない。
例えて言うならば、私から見た「イトコ」は、私の母から見た「おい/めい」である。スタイルシート（母）から見た「おい」は、それを読み込んだ HTML（私）から見た「おい」とは別人である。
こうした不具合が Netscape では生じてしまうのだ。その結果、背景に画像を指定したのに無地になってしまったりする。ウェブ・ページなんて文字さえ読めれば良い、というのは理解出来る見解だが、製作者の側からすれば、制作にかかった労力の何分の一かが報われない事になる。
世間で「このページは Internet Explorer で最適に見られます」とうたったページがあるのを良く目にするが、理由が以上の事なら納得は出来ないが理解は出来る。回避法があるからである。昨日も書いたように背景画像を指定したファイルと同じフォルダーに、スタイルシートをもう一つ置いてやって、「そのフォルダーから見た」相対 URL を再度指定してやって、カスケーディングさせてやれば良い。それが出来るからこそカスケーディング・スタイル・シートと名乗っているのだから。
しかし、正しい HTML を書いていて、それを上手く表示できない責任は、作者である貴方にはなく、酷いブラウザーを使っている閲覧者の方にあります。表示できないページが沢山あれば、その人は酷いブラウザーをヴァージョンアップさせるか、別のブラウザーに乗り換えるでしょう。それが真っ当な道です。