ブロック・インラインを問わず、どのタグに挟まれた文字でも書式を指定することができますが、
ここではp（段落）を例にして、書式を指定する方法を紹介します。
| 文字書式 | CSS | 指定例 | タグの記述 | ページでの表示 |
|---|---|---|---|---|
| 色をつける | color: 色の名前; | p { color: red;} | <p>字を赤くする</p> | 字を赤くする |
| 大きさを変える | font-size: 数値%; | p { font-size: 60%;} | <p>他の文字の60%の大きさにする</p> | 他の文字の60%の大きさにする |
| p { font-size: 120%;} | <p>他の文字の120%の大きさにする</p> | 他の文字の120%の大きさにする | ||
| font-size: smaller; | p { font-size: smaller;} | <p>他の文字より一回り小さくする</p> | 他の文字より一回り小さくする |
|
| font-size: larger; | p { font-size: larger;} | <p>他の文字より一回り大きくする</p> | 他の文字より一回り大きくする | |
| 文字の太さを変える | font-weight: bold; | p { font-weight: bold;} | <p>字を太くする</p> | 字を太くする |
| 文字を斜体にする | font-style: italic; | p { font-style: italic;} | <p>字を斜体にする</p> | 字を斜体にする |
| 小文字を一回り小さな大文字にする | font-variant: small-caps; | p { font-variant: small-caps;} | <p>Capital Word</p> | Capital Word |
| 文字に線を引く | text-decoration: underline; | p { text-decoration: underline;} | <p>下線を引く</p> | 下線を引く |
| text-decoration: overline; | p { text-decoration: overline;} | <p>上線を引く</p> | 上線を引く |
|
| text-decoration: line-through; | p { text-decoration: line-through;} | <p>取消線を引く</p> | 取消線を引く |
|
| text-decoration: underline overline; | p { text-decoration: underline overline;} | <p>上下線を引く</p> | 上下線を引く |
|
| 行間を変更する | line-height: normal; | p { line-height: normal;} | <p>標準の行間を 使用する</p> | 標準の行間を |
| line-height: 数値%; | p { line-height: 150%;} | <p>行間を150%の 高さにする</p> | 行間を150%の |
|
| line-height: 数値pt; | p { line-height: 20pt;} | <p>行間を20ポイントの 高さにする</p> | 行間を20ポイントの |
|
| line-height: 数値; | p { line-height: 1.5;} | <p>行間を1．5倍の 高さにする</p> | 行間を1．5倍の |
文書全体に指定を適用したい場合は、body{ font-weight: bold; }というように、bodyにCSSを指定します。
表の中の文字に指定を適用したい場合は、tableではなく、td{ font-weight: bold; }というように、td（またはth）にCSSを指定します。
文字書式を指定するCSSの中には、ブロックタグにしか適用できないものもあります。
| 文字書式 | CSS | 指定例 | タグの記述 | ページでの表示 |
|---|---|---|---|---|
| 文字を左揃えにする | text-align: left; | p { text-align: left;} | <p>左揃え</p> | 左揃え |
| 文字を中央揃えにする | text-align: center; | p { text-align: center;} | <p>中央揃え</p> | 中央揃え |
| 文字を右揃えにする | text-align: right; | p { text-align: right;} | <p>右揃え</p> | 右揃え |
| 1行目を字下げする | text-indent: 数値em; | p { text-indent: 1em;} | <p>emは文字幅のことで、指定した文字の数だけ、段落の１行目が字下げされます。</p> | emは文字幅のことで、指定した文字数ぶんだけ、1行目が字下げされます。 |
インデントで使用できる数値の単位には、emの他に%（指定されたブロックの大きさに対する％）、px（ピクセル。画面の画素）、mm（ミリメートル）、cm（センチメートル）、in（インチ。1in=2.54cm）、pt（ポイント。1in=72pt）などもあります。