LESSON 2 - The <FONT> Tag - Changing The Size, Color and Face Of Your Text.

In this lesson you will learn how to change the:

The SIZE, COLOR, FACE are Attributes of an HTML tag, FONT.


ATTRIBUTES are additional formatting codes that can be added to normal HTML tags to improve or enhance the tag. The general form of a tag with attributes is:


An example would be: <font size=4 color=#FFFF00 face="times new roman">.


Almost all HTML TAG will have one or more attributes. Why am I mentioning this now? So, that in future lessons you will remember the word ATTRIBUTE and know what it means.

Size Of Text

Now to continue on with changing the size of your text. Highlight the words, first web page by positioning your cursor either at the start of the words or end of the words and, while holding down the left cursor button, move to the other end of these words.

Then click on the Font Tag icon one of the font options to use. In this case we will use font size.

<font size="">first web page</font>

In this case we will use FONT SIZE and insert 6 as the size so it now looks like this:

<font size="6">first web page</font>

When you click on the Preview tag you will see:

It is not necessary to save the page with each change as Preview will show the page with the changes. But, I recommend that you save the page often by using the SAVE ICON.

Now the size we used, 6, could be any number from 1 to 7, with 7 being the largest and 1 being the smallest. You can try different size and see what happens.

Color Of Text

Making text with a different color is easy. Use the undo icon in the tool bar until you are back to where there is no <font> tag on the page.

Now, highlight the text, first web page and then select FONT FACE SIZE COLOR from the FONT ICON.

<font face="" size="" color="">first web page</font>

Delete the face="" as we will take this attribute up later. Then insert 6 as the size and put #FF0000" as the color.

You could also use the TOOLS COLOR ICON, (black circle) to bring up the color chart. First, place your cursor between the double quotes in color="". Then click on the color your want to use and the hexadecimal color code will be placed where the cursor is located. In this case, the top right red, #ff0000 was clicked on.

The code should now look like this:

<font size="6" color="#ff0000">first web page</font>

When you display the page use Preview this is what you will see.

You can also type the font tag directly into the code if you wish but with HTML-KIT it is very easy to do fonts. Here are the three attributes for font:

Face Of Text

FACE mean how the text looks. HTML-KIT should start with a default font face of TIMES NEW ROMAN. You computer most likely came with several TRUE TYPE FONTS already installed. To find out which font FACES you have, please use your Windows Explorer and look in C:\WINDOWS\FONTS. Many people use TIMES NEW ROMAN for a standard font but I use VERDANA.

So now highlight the text one more time and then use the FONT ICON and and select just the FONT.

IMPORTANT NOTE: - every PC has its own list of fonts. Only these fonts can be used when displaying a web page. Therefore, if you use a strange font on your web page that makes your page look cool it will not look cool to your visitor unless they too have that font installed on their PC.

Be sure you have backed up to the original text we had (no font) and this time we will select: size=6, color=red, and face=impact and then the file will look like this:

My <font face="impact" size="6" color="#ff0000">first web page</font> made with HTML-KIT.

and the Preview will now show this:

NOTE: - if the visitor to your site does not have the font you specify for your text they will only see their default text.

The face attribute can have a 2nd, 3rd, etc. name mentioned in the tag just in case the visitor to your page doesn't have your first choice for a face. So you can add a 2nd or 3rd face to the tag by positioning your cursor after the impact and before the " and just typing in the font name.

<font face="face1, face2, face3,...">

where face1, face2, face3, etc. are names of various faces, e.g. verdana,arial,village square.

<font> is used to change the size, color and/or the face of your text. This HTML TAG has three attributes: SIZE, COLOR, and FACE. A complete tag would look like this:

<font size=n color="#XXXXXX" face="face1, face2, face3,...">

You should use the font icon under the font tab, or use FORMAT > FONT in the tool bar, to select the font you want for any characters.

Remember to click the SAVE icon after you have made changes to an existing file.


Now that you know all about TEXT on your page let's get some color on the page.