装飾は全てCSSで制御

装飾用のHTMLタグが使用できないXHTMLでは、全てCSSで装飾。

HTMLでは、「b」や「font」など、装飾するためのタグがいくつか存在しましたが、XHTML1.1からはこれらのタグが廃止され、装飾は全てCSSで制御することになりました。

[サンプル(A)：文字の色をredに]

<font color="red">テキストテキストテキストテキスト</font>

[サンプル(A)をXHTMLに適合させた場合]

<span style="color:red;">テキストテキストテキストテキスト</span>

これまでfontタグのcolor属性で指定していたテキストの色は、CSSのcolorプロパティを利用して指定しなければなりません。

[サンプル(B)：背景の色をaquaに]

<div bgcolor="aqua">テキストテキストテキストテキスト</div>

[サンプル(B)をXHTMLに適合させた場合]

<div style="background-color:aqua;">テキストテキストテキストテキスト</div>

これまでbgcolor属性で指定していた背景の色は、CSSのbackground-colorプロパティを使用して指定しなければなりません。

上記サンプルを見ると、これまでよりもコードが長くなるように感じてしまいますが、これは簡易的にタグに直接CSSを指定しているためです。

CSSは外部ファイルに記載するのが一般的、効率的ですので、実際サイトを作成する際は、

[HTMLの記述]

<span class="selecterA">テキストテキストテキストテキスト</span>
<div class="selecterB">テキストテキストテキストテキスト</div>

[CSSの記述]

.selecterA { color:red; }
.selecterB { background-color:aqua; }

このようにセレクタを付け、CSSの指定は外部ファイルに記載するようにしましょう。