![[HWB]](/image/hwb3.png "[HWB]"){kind=small}
テキストに関する見ばえを指定する方法を説明します．
文字の色
文字の色は color プロパティで指定します．
ソース
<span style="color: red;">フェラーリ</span>はイタリアの自動車メーカーで，優秀な F1 コンストラクターとして有名である．
出力
フェラーリはイタリアの自動車メーカーで，優秀な F1 コンストラクターとして有名である．
値の部分は red, blue など名前で指定することもできますが，他にも # の後に 16 進数の 2 桁の数を 3 つ続けて書いて光の三原色(赤・緑・青)の強さを指定することもできます．たとえば赤色は #ff0000 と表されるので，上の例は次のように書いても構いません．
ソース
<span style="color: #ff0000;">フェラーリ</span>はイタリアの自動車メーカーで，優秀な F1 コンストラクターとして有名である．
出力
フェラーリはイタリアの自動車メーカーで，優秀な F1 コンストラクターとして有名である．
色の指定について詳しいことは
17.4.9 補足 を参照してください．文字の大きさ
文字の大きさは font-size プロパティで指定します．
ソース
font-size プロパティを使うと<span style="font-size: large;">このように</span>文字が大きくなります．
出力
font-size プロパティを使うとこのように文字が大きくなります．
値の指定には
17.4.9 補足 で説明するように数字を使っても良いですし，large などのキーワードで指定することもできます．medium が通常のサイズで xx-small, x-small, small, medium, large, x-large, xx-large の順に字が大きくなっていきます．なお font-size プロパティ指定の際には，em は親要素のフォントサイズを意味します．
文字の太さ
文字の太さは font-weight プロパティで指定します．
ソース
文字を太くするには <span style="font-weight: bold;">font-weight プロパティ</span>を使います
出力
文字を太くするには font-weight プロパティを使います
値として normal を指定すると普通の太さ，bold を指定するとそれより太くなります．また 100, 200, …, 900 と 100 単位の数字で指定することもできます．この場合数字が大きくなるほど文字は太くなりますが，どれくらい太くなるかはウェブブラウザに依存します．
親要素との相対的な太さを指定するときは border, lighter という値を使います．
斜体
文字を斜体にするには font-style プロパティを用います．
ソース
font-style プロパティの値を italic にすると<span style="font-style: italic;">イタリック体</span>になります．
出力
font-style プロパティの値を italic にするとイタリック体になります．
値には normal, italic, obliqueの3つがあります．italic も oblique も斜体ですが，oblique は通常のフォントを傾けるのに対し，italic は斜体専用のフォントを表示します．
フォント
フォントを変えるには font-family プロパティを用います．
ソース
<span style="font-family: 'fantasy';">フォントを fantasy にしてみました．ソースと出力の見た目がちょっと変わりますね．</span>
出力
フォントを fantasy にしてみました．ソースと出力の見た目がちょっと変わりますね．
値としてフォント名を指定する場合は，”ＭＳ ゴシック”のようにクォーテーションでフォント名をくくります．またフォント名以外にフォントファミリー (serif, sans-serif, cursive, fantasy, monospace など) を指定することも出来ます．
アンダーライン，打ち消し線
文字にアンダーラインや打ち消し線を付けるには text-decoration プロパティを使います．
ソース
<span style="text-decoration: underline;">下線</span>，<span style="text-decoration: line-through;">打ち消し線</span>
出力
下線，打ち消し線
値には underline, line-through の他に oveline (上線) と blink (文字の点滅) があります．
行の高さ
行の高さを設定するには line-height プロパティを使います．
ソース
<p>普通の行の高さは<br>こんな感じです．</p> <p style="line-height: 2em">しかし line-height プロパティを指定すると<br>このように 1 行の高さを変えることができます．</p>
出力
普通の行の高さは
こんな感じです．
しかし line-height プロパティを指定すると
このように 1 行の高さを変えることができます．
文字の表示位置
テキストの表示位置は通常左揃えですが text-align プロパティを用いると右揃えや中央揃えができます．
ソース
<div style="text-align: center">こうすると中央に文字が表示されます．</div> <div style="text-align: right">今度は右揃えです．</div>
出力
こうすると中央に文字が表示されます．
今度は右揃えです．
プロパティの値には left, center, right と justify の4つがあります．justify は両端を揃えることです．
インデント
ブロック要素のはじめの 1 行の字下げ幅を指定するには，text-indent プロパティを用います．
ソース
<p>この文章の左端が，通常の位置です．</p> <p style="text-indent: 1em;">一方 text-indent プロパティを使うと，字下げして表示されます．</p>
出力
この文章の左端が，通常の位置です．
一方 text-indent プロパティを使うと，字下げして表示されます．
長さは数値で指定する他に，親ブロック要素の横方向の長さに対する割合を%で指定することもできます．数値による指定については
17.4.9 補足 を見てください．