文字や段落、画像などの表示形式を指定するのが「スタイル」とよばれるもので、あらかじめ決められた方法(文法)で指定する。たとえば、「この文は赤色で活字の大きさは12ポイント」というテキストを、赤色で活字の大きさを12ポイントで表示するときは、
<span style="color:red; font-size:12pt;">この文は赤色で活字の大きさは12ポイント</span>
と記述する。フォントの色は "color : red;" で定義されている。青色にしたいときは"red"のかわりに"blue"と書く。文字(フォント)の大きさが
"font-size : 12pt;"で定義されている。15ポイントにしたいときは"12pt"を"15pt"と書く。
<span style="color:blue; font-size:20pt;">この文は青色で活字の大きさは15ポイント</span>
※活字の大きさをポイントとよび"12pt"のように表記する。12ptは標準的な大きさで、Wordなどでは10.5ptが標準に設定されている場合もある。この段落(パラグラフ)は10.5ptで表示されている。
ポイント単位のほかにpx, em, %などの指定ができる。pxはピクセルと呼ばれ、PC画面などの文字の大きさを示すことが多い。12pxというのは、ひとつの文字が縦横12ピクセル(ドットともいう)の大きさである。
(例)このテキストは10.5pxで表示されている。使っているPCの画面表示精度によって見た目の大きさが異なる。
おなじ書式を複数箇所のテキストに使いたいときは、まず<HEAD>と</HEAD>の間に、
<style type="text/css">
<!--
.red12 { color : red; font-size : 12pt; }
-->
</style>
と書いておく。red12は任意の英数字からなる文字列である。先頭の文字が"."であることに注意。"red12"は"class"と呼ばれる名前である。
<body>のなかで、この書式にしたいテキスト部分を
<span class="red12">赤色、12ポイントです</span>
のように書く。段落すべてをこの書式にしたいときは、
<p class="red12">この段落のテキストはすべて赤色で大きさは12ポイントです。</p>
と書く。pの替わりにdivを使っても良い。 先の <style>の中で、".red12"を定義したが、先頭の"."を"#"にする(#red12
{…})こともできる。この場合の参照は、class="red12"ではなく、id="red12"とする。classとidの使い分け方は勉強不足のため説明できない。
どちらを使っても変りがないようである。ひとつのタグの中でclassとidの両方を使える。たとえば、
.bold {font-weight:bold;}<br>
#red {color:red;}<br>
と定義しておいて、次のように引用する。
<span class="bold" id="red">classとidの両方を使った例</span>
※注意※
リンクを示す文字列では、pやspanなどのスタイルで指定した文字の色は無効である。かならず<a>タグでスタイル指定しなければならない。一方、文字の大きさや太字、フォント種類などの指定は<a>と</a>の間のテキストにも適用される。
<span style="color:red; font-weight:bold; font-size:15pt;"><a
href="link.html">
リンクの文字</a>
の色には適用されない</span>