CSS Font

Styling your font is easy. You add life to your headers, paragraphs or simple text in CSS.

CSS Font Color

You can change the font color of your text using color keyword. You can also defined color value in hexadecimal format by adding # sign before the value.

p {
   color: blue;
}
h3 {
   color: #990000;
}
<p>Paragraph colored in blue.</p>
<h3>Heading colored in dark red.</h3>
Output

Paragraph colored in blue.

Heading colored in dark red.

CSS Font Family

You can change the font family of the text using font-family keyword.

p {
   font-family: Georgia, "Times New Roman", Times, serif;
}
<p>Paragraph with font Georgia font family.</p>
<h3>This is a heading.</h3>
Output

Paragraph with font Georgia font family.

This is a heading.

CSS Font Style, Weight and Underline

You can make the text bold, italic or underline by using font-weight, font-style and text-decoration keywords respectively.

#p1 {
   font-weight: bold;
}
#p2 {
   font-style: italic;
}
#p3 {
   text-decoration: underline;
}
<p id="p1">This text is in bolded.</p>
<p id="p2">This text is italicized.</p>
<p id="p3">This text is underlined.</p>
Output

This text is in bolded.

This text is italicized.

This text is underlined.

Share this tutorial!