Lesson Three covers:

• Text Font / Style.
• Text Size.
• Text Color.

Begin by opening the file page02.html (the sample page you created in lesson two) and SAVE AS - copying it as page03.html so you don't make any changes to your sample page from lesson two. Remember, always create a new sample page with each lesson. As you proceed though this lesson, you may start editing page03.html, or wait until you have read all of the below text.

This is my sample page for this lesson: click here.
This is what your code will look like: click here.

Section 1 - FONT TAG

To change the size of the text, you use the FONT tags:

Used as shown above, they serve no purpose. You need to add attributes to reflect the changes you want to make to the text surrounded by them. You can specify the text SIZE, text COLOR and the FACE (style or font) of the text. Here is an example where I also use the BOLD tag:

<FONT FACE="verdana,geneva,arial,helvetica,sans serif" SIZE=4 COLOR="#339900">These attributes make <B> the text </B> look like this.</FONT>

Below I will discuss the three FONT attributes used above: FACE, SIZE and COLOR. These are very important so make sure you understand this lesson well.

Section 2 - FACE - the TEXT FONT

The FACE attribute determines what style (also called a font) the text should be. Now the thing about the FACE tag is it depends on what fonts you have on your computer. If you took every computer in the world, you would not find one common font on all of them. That is why I included more than one of them in the FACE attribute above. When your computer read the code used to create this page that you are looking at now, it searched to see if you had one of those fonts, in the order I listed them. They are so common, more than likely you did have one of them.

Do you have to use the FACE attribute? No. So why specify a specific font just for simple text on a page like this? Well I will tell you why I do. I think most people find it easier to read text created with letters that do not have fancy little "flags" or flourishes on them, also called serifs - especially on web pages. Fonts without the fancy embellishments are referred to as sans serif (without any serifs). If you have any of those fonts I used above on your computer, the text you are reading now is very plain and easy to read.

If you do not see any difference in the style of the text in the above paragraph, compared to all the rest of the type on this page, you will just have to trust me - use the FACE attribute with at least "arial,helvetica,sans serif" as the attribute. You will make reading your web pages much easier for the majority of people accessing the Internet. Over 90% of computers using Windows or Mac operating systems use these fonts.

When I write web pages, I usually list "arial,helvetica,sans serif" as my FONT attributes because the letter spacing is more compact. I added verdana and geneva for the lesson text to make reading the tags easier for you. (Including "san serif" in the attribute specifies the classification - more on that in another lesson).

Example with verdana and geneva: <FONT> </FONT>

Example without verdana and geneva: <FONT> </FONT>

Section 3 - TEXT SIZE

Type size is easier to explain. You do not have to specify a size for your text. If you do not, then whatever the default is on a viewers computer will be used. It also depends on what Browser a viewer is using. Unfortunately, web browsers are not consistent. One can also customize their web browser to change the way text is sized when they view web pages. This makes your job creating a web page very frustrating.

So why bother? To try as best as you can to make your page viewed as you want it to be. If you want text to stand out more, enlarge it. If you want text to be less noticeable or you want to use less space, reduce it. The text you are reading now I have specified to be size 2. If you view this page with Microsoft Explorer and Netscape Navigator, it will appear larger with Navigator than with Explorer, generally speaking based on their default settings. That is one more reason you should test your pages with both of these browsers before uploading them for all to view.

On your computer, using whatever browser you are viewing this page with now...

Section 4 - TEXT COLOR

I told you how color is specified as the background color of a web page at the beginning of this lesson - using the BGCOLOR attribute. It is very similar with text. The default text color for web pages is black. Unless you want to change that, you do not usually need to use the COLOR attribute very often.

If you decide to make the background of your web page Black, and you did not use the COLOR attribute in the FONT tag, you would have black type on a black page. In case you don't understand that, there is a large black letter A in the black box below. Can you see it?

Okay, unless you are not human and have some special alien eye sight, I will assume you can not see the letter A in the box above. (It really is there.) To let you see the A, all I have to do is change the COLOR attribute in the FONT tag to COLOR="#FFFFFF". I told you above, that white is expressed as "#FFFFFF" in case you forgot that.

See, I told you it was there. You can also use the COLOR attribute when you want to make some words standout if they are more important or you just feel a little Blue. It also makes the text easier to read, when you change the color to make a word standout, if you also make it bold, especially if it is more important or you feel very Blue.

A word of caution... be careful when you make text blue. It is commonly accepted that blue text on a web page means that text is a clickable link to another page. You don't want people clicking on your blue text and wondering why nothing is happening. It is even more accepted that underlined blue text is a link, but it doesn't have to be underlined to be a link nor does it have to be blue to be a link as you can see if you clicked on any of the type above.

Did you know... Approximately 1 in 20 people have some sort of color vision deficiency. Those who do often find it diffficult to tell red and green things apart. The images below will give you an example. The images on the left are what someone with normal color vision might see, and the ones on the right what someone with a color impairment might see. Keep this in mind when designing your web pages.

Section5 - CHANGING ATTRIBUTES

<FONT FACE="verdana,arial,helvetica,sans serif" COLOR="#000000" SIZE=2>

That specifies all text to follow, unless a new FONT tag specifies otherwise, will be that FACE, COLOR and SIZE.

<FONT SIZE=4>This text will change to SIZE 4 but still be the same FACE and COLOR as above. One attribute can change but until closed, the other attributes still are in effect.</FONT>

This text goes back to SIZE 2 now because the above SIZE change has been closed.

<FONT COLOR="#0000FF SIZE=3>This text has a new COLOR and SIZE but the FACE is still as specified in the first FONT tag since that hasn't been changed and that tag has not been closed.</FONT>

Because the above COLOR and SIZE change has just been closed, this text is now back to the first COLOR and SIZE as specified in the first FONT tag since it hasn't been closed yet.

</FONT> (This now closes the original FONT tag so any text to follow will now be whatever the browser default is on that person's computer, which could be anything unfortunately.)

You should now have learned how to create a page that looks like my sample page (page03.html) for this lesson. Click here to see it again, then try to create the code before going to another lesson. Check to make sure you did it correctly, by clicking here to see the code.