HTML Lessons

Formatting Fonts

As explained earlier, some opening tags will have attributes and values. These tags help define the tags even further. For example, when it comes to the color, size and style of the font you'll need to add attributes. Here are some examples of attributes for fonts.

color="blue" color is the attribute and blue is the value

size="1" size is the attribute and 1 is the value

face="arial" face is the attribute and arial is the value

As shown above, the attribute must be connected to the value with an equal sign and the value must be placed in quotes.

Lets' try to use this great tool.

Changing the font color

Say we want to change our font color to blue. First we'll need to insert the font tags:

<body> </body>

Then we'll need to insert the color attribute as follows:

<body> </body>

Then we need to put the text that we want to appear as blue in between the opening and closing font tags.

<body> <fontcolor="blue"> This text is blue. </body>

Please Note: The attribute must be included within the opening tag just before the greater sign (>).

The result of the code above would be:

This text is blue.

Let's say you want your text to be green or orange. Easy enough. All you have to do is change the "blue" in the code to "orange", like so:

Code Result
 This text is blue. This text is blue.

 This text is orange. This text is orange.

 This text is green. This text is green.

Alternatively, you can use the color code instead of the color name. A color code is a six digit code preceded by a pound sign (#) that represents any given color. For example:

#FF0000 is the color code for red.

It is always better to use the color code since some old browsers can't read the color name. All of the web safe color codes can be found on our color page.

Here are some examples of the color code in use:

Code Result

 This text is blue. This text is blue.

 This text is orange. This text is orange.

 This text is green. This text is green.

Changing the font size

We can also change the size of the text. In HTML the font sizes go from 1-7. Here are some examples of font sizes.

Code	Result
<font size="1"> This text is size 1. </font>	This text is size 1.
<font size="2"> This text is size 2. </font>	This text is size 2.
<font size="3"> This text is size 3. </font>	This text is size 3.
<font size="4"> This text is size 4. </font>	This text is size 4.
<font size="5"> This text is size 5. </font>	This text is size 5.
<font size="6"> This text is size 6. </font>	This text is size 6.
<font size="7"> This text is size 7. </font>	This text is size 7.

Changing the font face

You can also change the face of the text. Here are some examples of safe font faces.

Code	Result
<font face="Arial"> This text is Arial. </font>	This text is Arial.
<font face="Arial Black">This text is Arial Black.</font>	This text is Arial Black.
<font face="Comic Sans MS">This text is Comic Sans MS.</font>	This text is Comic Sans MS.
<font face="Courier New"> This text is Courier. </font>	This text is Courier.
<font face="Georgia">This text is Georgia.</font>	This text is Georgia.
<font face="Impact"> This text is Impact. </font>	This text is Impact.
<font face="Times New Roman">This text is Times New Roman.</font>	This text is Times New Roman.
<font face="Trebuchet MS">This text is Trebuchet MS.</font>	This text is Trebuchet MS.
<font face="Verdana">This text is Verdana.</font>	This text is Verdana.

You can also include all three attributes together, as follows:

This text is blue, Impact and size 5.

This text is blue, Impact and size 5.

Next Lesson