LESSON 4: Font Size, Color, and Face

You have now learned how to set up an HTML document and the body, and center, bold, italicize, underline, and strike-out text. In this lesson you will learn how to change the font sizes and colors, as well as which font it uses.

Sizes

This will be simple. You already know basically how HTML works, and understand how tags work, so from now on, all the basic stuff will just get easier and easier.

Increasing/decreasing the font size adds two more elements to the tags. Instead of just using a word or a letter, you have to also supply a parameter and a value. Kind of like how the BODY tag works!

The tag: 
The parameter: SIZE
The value: "preferred size"

You must replace preferred size with a valid size. All valid sizes have either a + or a - sign and a number. For example, "+2" would set the font size to 2 above the standard, NOT 2 above the previous font size. "-1" would set the font size to 1 below the standard.

Putting it together: The format for any similar tag is <TAG PARAMETER="value">. In other words, . Yours should look just like that, except maybe with a different size.

Ending the tag: Just like the other tags you have learned, you must specify when you want the browser to restore the normal or previous text. The way you would do this is by taking the tag, only put a / in front of the F. You can think of the / as "end" when used in a tag. So you would insert

Colors

This isn't any harder than increasing the size. It uses the same tag, but the parameter and value change.

The tag: 
The parameter: COLOR
The value: "preferred color"

Just replace preferred color with a valid color. Look at my Pre-defined Colors page for a wide selection of colors to use, or download RGB-2-Hex Color Converter, a program which will convert any color from it's RGB (Red Green Blue) value to hex, which is what all undefined colors use.

Putting it together: Follow the same format as previously shown, <TAG PARAMETER="value">, replacing the words appropriately. In other words, . Yours should look just like that, except maybe with a different color.

Ending the tag: The EXACT same as ending the size. Just take the tag, only put a / in front of the F. So you would insert

A Simple HTML File

We will use both the size and the color elements in this to make sure you understand how they both work, and so you can have something to look at. We will also add previously learned elements just to refresh your memory. It will also demonstrate three important things, see if you can point them out.

<HTML>
<HEAD>
  <TITLE>Demonstrating Font Colors & Sizes</TITLE>
</HEAD>

<BODY BGCOLOR="Gray" TEXT="Black">

<P>

<CENTER>
<FONT SIZE="+3">Font sizes and colors demonstration
</CENTER>

<P>

<FONT COLOR="Blue" SIZE="+2">
<I>Blue text</I>
</FONT>

</FONT>

<P>

<U>Normal text color and size</U>


</BODY>
</HTML>

Click here to see the effect of the above file!

Did you spot the three important ideas in here?

(1) You can combine the two different parameters into one tag, . You cannot combine two tags into one, however, like (an italicize and a font combined).

(2) If you don't end the font tag, and then create another font tag and end it, it will reload the previous font tag. For example, if you have and don't end it, and then have , after you end that tag it will load the +3 size again.

(3) You can have 2 ending tags in a row, , and it will end both font tags, most recent one first. In this example, the first ends the , and the second ends the .

Face

A new addition to Lesson 4, so I will call it Lesson 4.1. The font face is the actual font the page uses. Examples are: Times New Roman, Arial, Helvetica, etc. It's pretty simple to tell it what font to use, you just have to be careful you spell it PERFECT, and it's CaSe SEnSitIvE! For example, Times New Roman is not the same as TIMES NEW ROMAN. If you type the font incorrectly it will use the default font.

The tag: 
The parameter: FACE
The value: "preferred font"
Put together:

Pretty simple, eh? If you are not sure which fonts you have, load a program such as WordPerfect and experiment with the different fonts. This is also a great way to make sure you spell it correctly and use the proper case.

As an example, I will set the font to Comic Sans MS. If you do not have this font, you will not be able to tell the font has changed. This is the problem with using different fonts: if the person who's loading your page doesn't have the font you specify, it will just use the default font.

The code: Hello everyone!

The result: Hello everyone! One variation you can do on the value for font faces is specifying many different fonts. This way if the person viewing the page doesn't have the first font specified, it will load the second or the third, etc. The way you do this is by separating the different fonts with commas and NO SPACES! It won't work if you put spaces after the commas. Why? That's the way HTML is made, I guess. Maybe this problem will be fixed in a later version of HTML.

Here's an example:

Hello everyone!

The result: Hello everyone!

The browser first checks to see if the font BankGothic MD BT is installed, and if not, it checks for Comic Sans MS. Starting from the first font in the list, it will check for the first specified font that is installed on the viewer's computer. Almost every computer comes with the font Arial, so the last result is it loads Arial. If for some odd reason the viewer's computer doesn't have Arial, it will use the default font.

You can't really mess up the page if you just mess up on the font face. The only exception to this is if you accidentally forget one of the " (double quotes) around the value.

Forward to Lesson 5: Links To Other Pages/Files
Back to Lesson 3: "Prettier" text
Back to the Contents

E-mail me.