Font Color and Size

  • Change the color of any text by using the tags:

    <font color="color">...</font>

    This is <font color="blue">blue</font>. This is blue.
    This is <font color="green">green</font>. This is green.

Most standard colors will work. Also try "lights" and "darks" such as "lightblue" or "darkgreen." You can also specify a particular hexadecimal color number, such as: <font color="#864086">. For a list of hexadecimal color codes, visit December.com: HTML.

If you would like to assign a specific color to the entire text of your page, add text="color" within the <body> tag.

Example: <body text="blue">

Even if you assign a color to your entire text, you can still change the color of any portion of that text by using the tags you learned above.

  • Change the font type of any text by using the tags:

    <font face="font type"> ... </font>

    This is <font face="arial">arial</font>. This is Arial.
    This is <font face="geneva">geneva</font>. This is Geneva.

    (Note: If the font type you specify is not available in the user's computer, the font type will default to the browser default, usually Courier or Times New Roman; so it is best to stick to standard font types if you want to be able to control what is displayed in the user's browser.)

  • Change the size of any text by using the tags:

    <font size=value>...</font>

    Example: <font size=4>

    The default font size on most browsers is "3", so any values larger than 3 will make the text larger, and any values smaller than 3 will make it smaller.

    You can also change the font size by adding to or subtracting from the default font size.

    Example: <font size=+4>, or <font size=-2>

    This font is <font size=+2>increased by 2</font>. This font is increased by 2.
    This font is <font size=+1>increased by 1</font>. This font is increased by 1.
    This font is <font size=-2>decreased by 2</font>. This font is decreased by 2.
    This font is <font size=-1>decreased by 1</font>. This font is decreased by 1.

    You can also change the font size by using the tags <small> and <big>:

    This is <small>small</small> text. This is small text.
    This is <big>big</big> text. This is big text.

    Heading tags also change font size, creating a bold "heading" for a paragraph or story:

    <h1>This is an H1 heading.</h1>

    This is an H1 heading.

    <h2>This is an H2 heading.</h2>

    This is an H2 heading.

    <h3>This is an H3 heading.</h3>

    This is an H3 heading.

    End any font element change with the tag:

      </font>

    Or, by using the coordinating ending pair for the specific tag you used:
      Example: </small>, </big>, </H2>

In the next section, we'll find out how to add background color.