How Web Pages Work

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 <font color="green">green</font>.

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

If you would like to assign a specific color to the entire text of your page, add text="color" within the 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.

Font Type

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 <font face="geneva">geneva</font>.

(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 <font size=+1>increased by 1</font>

This font is <font size=-2>decreased by 2</font>

This font is <font size=-1>decreased by 1</font>

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

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

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


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

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

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

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

End any font element change with the tag:


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.