CSS | color | 文字の色

colorは文字の色を指定するためのCSSプロパティです。

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

実行結果初期状態

sample

.sampleクラスのcolorプロパティにredを指定すると、文字の色が変わります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    display:   inline-block; /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
    padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    color: red;
}

実行結果文字の色

sample

色はカラーコードで指定します。