HTML kit - Text Controlling Tags Part 3

It is now time to add a bit of spice to the otherwise dry text you have been used to till now. Various properties of text can be changed using the <FONT> tag. Font type, size and color can be modified using the appropriate attribute of this tag.

I shall be discussing the following:

• FACE: It's value/s specifies the font type.
• COLOR: Changes the color.
• SIZE: Changes Size.

FACE
Face attribute takes the name of the font you want to use. Common fonts on the Windows system are Verdana, Arial, Times New Roman and Comic Sans MS.

IMPORTANT: If you do not have the font installed in your system, the text will be displayed in the default font of your browser

After reading the 'IMPORTANT' message above, you might be thinking... "What's the use of changing the font when I don't know what fonts are installed on the visitor's computer?".
Ha! Well my friend, HTML developers provide us with solution to this problem.

Let's suppose you want the text to be displayed in a Sans-serif font. (These are fonts whose ends are blunt as opposed to serifed fonts that have strokes, flares or taperings at the ends). The common Sans-serif fonts on Windows are Arial, Verdana, Comic Sans MS. Since you do not know which of these is installed on the visitor's computer, include all in the attribute!

<FONT FACE="Arial, Verdana, Comic Sans MS, Sans-serif">

This tells the browser to use Arial and if it is not present, use Verdana, or if that is missing too, use Comic Sans MS. If the browser cannot find any of these fonts (highly unlikely, on a Windows system), it should just use any Sans-serif font available.
Be sure to spell the font name correctly.

COLOR
The attribute takes either the hexadecimal color value or just the color name. We shall leave the (lengthy) discussions on hexadecimal values for later and use color names here. Some common color names are Blue, Green, Red, Yellow, White, Black, Cyan, Magenta, Pink etc.

SIZE
The size attribute takes a number from 1 to 7 as its value with 1 as the smallest and 3 the default.

Also, you can use relative values, + and -, for increasing or decreasing font size relative to the current size. For increasing relative font size use values +1 to +6 and for decreasing use -1 to -6.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.