• 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.

    Related Post