いままでに何度も登場したが，要素の前景色を指定するのが color プロパティである。

color: 色;

このプロパティは，

• すべての要素に適用される。
• 初期値はブラウザに依存する（多くのブラウザでは，オプションで指定できるようになっている）。
• その要素で color プロパティを指定しなかった場合，それまで使われていた色（親要素の色）がそのまま使われる。

　例をあげておくことにしよう。スタイルシート

H1 { color: navy; }
DFN { color: red; }

を，1.3 で紹介した方法で HTML に適用させたとして，

<H1>色空間</H1>
<P>　身近な色空間は <DFN>RGB</DFN> と <DFN>CMY</DFN> がある。前者は，赤・緑・青による加法混合，後者はシアン・マゼンタ・黄による減法混合を特徴とする。</P>
<P>　カラーテレビの出力は，RGB であるが，NTSC 方式では輝度と色差を用いる <DFN>YCbCr</DFN> に変換されて電波で送信される。</P>

の HTML（部分）は，次のように出力される。

　以降，特に断らない限り，例はスタイルシートおよび適用させるべき HTML の一部分を続けて示す。出力例はその HTML のスタイルシートを適用させたものである。

　いっぽう，背景色は background-color プロパティで指定される。書式は，以下のいずれかである。

background-color: 色;
background-color: transparent;

このプロパティは，

• すべての要素に適用される。
• 初期値はキーワード transparent。
• その要素で background-color プロパティを指定しなかった場合，値は初期値に戻される。

　background-color プロパティで特筆すべきなのは，背景色がすべての要素に適用可能であるという点である。[HTML 3.2] では，背景色は文書全体，すなわち BODY 要素についてのみ指定可能であった。これと比べれば，CSS では文書全体から文字単位まで背景色が適用でき，デザインの自由度の高さが実感される。

　ところで，background-color プロパティの値に色ではなく transparent という値を与えた場合は，要素の背景色は“透明”になり，一般にその外側の要素の背景がそのまま見えることになる（これは，透過 GIF の“透過色”に似ている）。この transparent のような，プロパティの値となる，特別な意味を持った語をキーワードという。キーワードに，大文字・小文字の区別はない。

　背景色の例をご覧いただこう。

H1 { background-color: green; color: white; }
EM { background-color: navy; color: white; }

<H1>“目立つ色”とは</H1>
<P>　ある色が“目立つ”のは，前景色だけでなく<EM>前景色と背景色の対比</EM>によるところが大きい。身の回りには，道路標識のように，<EM>注意を引かせる</EM>ために目立つ色の組み合わせが効果的に用いられている。</P>

　ここで気づいてほしいのは，EM 要素ではその内容のテキストの周りだけに背景色が適用されているのに対し，H1 要素では（そのテキストが行いっぱいの幅を持っていなくても）行いっぱいに背景色が適用される点である。これら 2 種類の要素の決定的な違いは，“前後が改行されるか，されないか”である。

　一般に，H1，P，DIV のように前後が改行される要素は，その要素全体を囲むような，行いっぱいの幅の 1 個の長方形領域が背景色で塗りつぶされる。いっぽう，EM，SPAN のような前後が改行されない要素は，その内容の周りだけがぴったり背景色で塗りつぶされる。要素が行をまたいでしまう場合，長方形領域は複数に分割されてしまう。

　このことは，次の 2 つの例を比べるとよくわかる。STYLE 属性を用いて，

<P STYLE="background-color: aqua;">　ある色が“目立つ”のは，前景色だけでなく前景色と背景色の対比によるところが大きい。身の回りには，道路標識のように，注意を引かせるために目立つ色の組み合わせが効果的に用いられている。</P>
<P><SPAN STYLE="background-color: aqua;">　ある色が“目立つ”のは，前景色だけでなく前景色と背景色の対比によるところが大きい。身の回りには，道路標識のように，注意を引かせるために目立つ色の組み合わせが効果的に用いられている。</SPAN></P>

と書いた場合，

という違いが見られる。この，要素の種類によって背景色の適用のされかたが異なることは，文書のデザインにおいてひじょうに重要なことである。

　正確には，P 要素と SPAN 要素が生成するボックスが異なっているために，背景の適用のされ方が異なる。ボックスについては 3.1 を参照されたい。