プロパティと値
さて、CSSというものを使えばHTMLを装飾することができるということは分かったと思います。いよいよ今回、具体的なCSSの書き方を紹介します。
style属性
HTMLで書かれた文書に対して、CSSを適用する方法はいくつかあります。その一つがstyle属性です。属性についてはHTML編2-4: 属性で紹介しました。style属性はどんな要素にもつけることができる、グローバル属性（HTML編5-5: コントロールの属性・グローバル属性で解説）です。
つまり、style属性の中にCSSを書けば、その要素に対してそのCSSが適用されるということです。
CSSの書式
それではCSSの書式について、具体例を挙げて解説します。
<p style="color:red">赤い段落</p>
このp要素にstyle属性がついていて、そうするとこのp要素の文字色が赤くなります。
つまり、color:redというのがCSSで書かれた部分です。
これは「文字色を赤にする」という意味で、コロン（:）の左側をプロパティ、右側を値（value）といいます。
プロパティとはつまり設定項目です。今回の場合、「文字色」が変えられたのだから、プロパティcolorは「文字色」という意味になります。
そして、値が「赤」です。これはredですね。このCSSの意味は、「プロパティcolorの値をredにする」という意味でした。それで、colorの意味は「文字色」ですから、文字色が赤くなったというわけです。
まとめると、CSSの基本はプロパティ名 : 値という形です。空白は自由に入れて構いません。
色の指定
さて、このプロパティcolorは「文字色」ですから、その値として色を要求します。
今回はredという色名でしたが、数値による指定も可能です。
そもそも、CSSで使われる色というのは、基本的にはRGBという方法で表されます。これは、赤、緑、青という光の三原色を混ぜあわせて色を作るというものです。たとえば、この3色の光を混ぜると白になります。他に、赤と緑を同じ割合で混ぜると黄色になります。この黄色から、緑の割合を少なくしていくとオレンジになっていき、赤みが増していきます。
色を混ぜる割合の表し方は、各色をパーセンテージで表したり、あるいは0から1で表したりします。
具体的なCSSでの表し方は、一つはこのパーセンテージで表す方法です。具体的な書式は、rgb(R, G, B)です。R,G,Bには、それぞれ赤・緑・青の割合のパーセンテージが入ります。例えば、赤の場合、赤だけが100%発色して他の色は全くないので、rgb(100%, 0%, 0%)となります。colorプロパティで使う場合は、color: rgb(100%, 0%, 0%)という感じですね。
また、パーセンテージを用いた方法だけでなく、0～255の256段階の整数で表す方法もとられます。0が最小（0%）で、255が最大（100%）ですね。これを使うと、例えば赤はrgb(255, 0, 0)となります。パーセンテージではないので%はつきません。
なぜ256段階かというと、256というのは2の8乗であり、これはバイトと呼ばれるもので、コンピュータで扱うのに都合がいいのです。
さらに、この256段階の応用として、1バイト（0～255）が16進数でちょうど2桁に収まるので、R,G,Bを各2桁ずつの合計6桁で表し、先頭に#をつけるという方法があります。これは昔からある方法で、他の方法に比べて色をコンパクトに表現できます。
例えばさっきの赤は、rgb(255,0,0)で、255（最大）は16進数でffとなるため、#ff0000というようになります。
さらに、これに透明度を加えたrgbaという指定があります。rgba(R, G, B, 不透明度)という感じで、半透明になった色は、下の色が少し透けて見えます。不透明度は、0～1で、0のとき完全に透明で、1のときは不透明です。これをうまく使えばきれいなページを作れるかもしれません。
また、特別な色としてtransparentという色指定があります。これは、rgba(0, 0, 0, 0)と同じということになっています。つまり、全くの透明ということですね。これは。、例えばcolor: transparentという感じで使います。
昔、文字の色を背景と同じ色にして「見えない文字」を作ったりしたものですが、文字色をtransparentにしてしまえば、背景が1色でなくても見えない文字になります。
さらに、HSLという指定方法を使うこともできます。これはRGBとは別の指定方法で、Hは色相、Sは彩度、Lは輝度ということになっています。詳しくは調べてもらいたいですが、Hは0～359、SとLは0%～100%の指定となっています。
例えば、hsl(0, 100%, 50%)でさっきまでと同じ赤です。他に、hsla(H, S, V, 不透明度)というように透明度付きの指定もあります。
また、最初に出たredのような色名による指定ですが、他にも使える色名はたくさんありますが、例えばredはrgb(255,0,0)とか、対応する数値が決まっています。使いたい人は調べましょう。
最後に、currentColorという特殊な色名を使うことができます。実は、colorプロパティ以外にも色を指定すべきプロパティは結構あるのですが、その時に「colorプロパティと同じ色」という意味を持ちます。colorプロパティに指定しても意味がありません（この場合はcolor:inheritとみなされます）。
さらにここで、inheritという新しいキーワードが登場しました。これは、色の場合に限らず、どんなプロパティに対しても使うことができ、継承（親と同じ）という意味になります。color: inheritの場合は、その親要素と同じ色というわけです。colorプロパティは、デフォルトでこのinheritになっていることでしょう。そのため、例えばbody要素にcolorプロパティを指定してやると、その子のp要素なども全て同じ色になるのです。
背景色
さてここで、もう1つ色に関する新しいプロパティを紹介します。それはbackground-colorです。これはその名の通り背景色を決めるプロパティで、colorと同じく色を指定します。
例えば、body要素に対して、<body style="background-color: #000000">としてやると、この色#000000は、赤・緑・青が全くない色、すなわち黒ですので、ページ全体の背景色が黒になります。
そして、ここにさっき紹介したcolorプロパティを併用することができます。例えば、「背景色は黒、文字色は白」などというページを作ることも可能です。
そうするとだいぶ雰囲気が変わることでしょう。ここで、2つ以上のプロパティを設定するには、セミコロン（;）で区切ります。具体的には、こんな感じです。
<body style="background-color:#000000; color:#ffffff;">この#ffffffというのが、赤・緑・青が全部最大ですから、白ということになりますね。
また、背景色はbody要素に限らずどんな要素にも指定できます。というより、基本的にCSSでは、どのプロパティをどの要素に指定しても構いませんので、特に記述がなければ基本的にそういうものだと思いましょう。
ということで、今度はbody要素ではなくp要素にこの背景色を指定してみましょう。下に実例があります。
背景色が黒で文字色が白
p要素の部分だけ、背景色と文字色が変わっているのがわかります。
しかしここで気づくのが、文字がある部分だけでなく、右のほうまで黒くなっているということです。
少し先ですが、これについては第二章で詳しく解説します。