古いhtmlの規格ではfontというタグがあり文字の色や字体，大きさなどを指定していました。しかし，xhtmlの新しい規格ではこれは廃止になっています。その代わりにspanというタグとクラス属性を使います。
span とは「範囲」程度の意味でそのものにはあまり意味がありません。これにクラスの指定をつけて何のために印を付けたかを表現し，同時にスタイルの指定の目印にします。
span もem, strong と同様行内要素を指定するタグです。
spanも普通のタグなのでクラスなしでも使えます。たとえば，
<P>文章中の<span>強調したい文字</span>の色を変えたりする。</P>
ただし，表示の上ではこれだけでは何も変わりません。スタイルシートの部分にスタイルの指定をします。
span {color:#ff0000;}
結果はこうなります。
文章中の強調したい文字の色を変えたりする。
これに classの指定を加えるクラスごとに異なる見栄えにすることができます。たとえば文章内の虫の名前を全部赤にし、鳴き声を全部緑にするようにしてみます。
style に書き加えます
span.mushi {color:#ff0000;} span.koe {color:#00cc00;}
本文中に指定を加えます。
<p>いろいろな虫がいます。<span class="mushi">ウマオイ</span>は <span class="koe">スイッチョン</span>となきます。 <span class="mushi">スズムシ</span>は <span class="koe">リーンリーン</span>となきます。</p>
結果はこうなります。
いろいろな虫がいます。ウマオイは スイッチョンとなきます。 スズムシはリーンリーンとなきます。
style を書き換えただけで、全部の虫の色や鳴き方の色が変わります。また、文字の大きさなど、別の指定を加えることもできます。font-size は字の大きさです。
span.mushi {color:#996600; font-size:140%;} span.koe {color:#6600cc; font-size:80%; }
本文は全く変える必要がありません。結果はこうなります。
いろいろな虫がいます。ウマオイは スイッチョンとなきます。 スズムシはリーンリーンとなきます。
font-size の 100% は、その要素（今の場合はp タグ）内の普通の文字の大きさのことです。
次のページで説明する「テキストの内容を重視して指定しよう」という話には少し反しますが、このようなこともできます。
この見出しは style に次のように書き加えます。一部だけ書きました。
span.c1 {color:#0000ff;}
span.c2 {color:#0033cc;}
span.c3 {color:#006699;}
・・・・・
本文中（ここでは見出し中）に指定を加えます。ここも一部だけ書きました。
<span class="c1">見</span><span class="c2">だ</span> <span class="c3">し</span><span class="c4">で</span> ・・・・・
色に緑を含めたので、いつもの見出しの薄い緑を白くしてあります。これもclassで指定してあります。