同じHTML文書に対してさまざまなスタイルシートを適用する例

同じHTML文章に対して、さまざまなスタイルシートを適用することができます。下記のラジオボタンをクリックするとこの文章に対してさまざまなスタイルシートを適用して表示することができます。

サンプル文章

ワープロは、表紙、目次、段落、箇条書きなど、文章の構造を記述することができるアプリケーションです。 また、文字のフォント、サイズ、色など、文章のレイアウトを記述することもできます。（略）

HTMLではタグ（tag）と呼ばれるものを使って文章の構造を表現します。 タグは半角の＜＞の間にタグの名前を書くことによって表現します。例えば段落を表すタグは＜ｐ＞と記述します。(略）

1. 箇条書き項目１
2. 箇条書き項目２
3. 箇条書き項目３

スタイルシート変更ボタン

下記のボタンをクリックすると、このウェブページに適用するスタイルシートを変化させることができます。
（ボタンをクリックした後は、カーソルキーで移動することもできます）
スタイルシートを設定しない場合
見出しを変化させるスタイルシート（赤字、斜体、明朝体、少し大きな文字にする）
段落を変化させるスタイルシート（本と同じように字下げして、段落と段落の間を空けない）
強調を変化させるスタイルシート（色を変え、影を付ける）
箇条書き変化させるスタイルシートその１（太字でローマ数字にし、行間を少しあける）
箇条書き変化させるスタイルシートその２（四角マークにし、色を変える）
表を変化させるスタイルシートその１（幅を広げ、データセルの中身を右揃えにする）
表を変化させるスタイルシートその２（セルの文字と枠の間をあけ、ヘッダセルの背景に色を付ける）
文書全体を変化させるスタイルシートその１（文字の色を白、背景色を黒にし、行間を少しあける）
文書全体を変化させるスタイルシートその２（2段組みにする）