link to hitmill.com home page



HTML: Formatting Text, Lesson 3

by Cheryl Gribble

Formatting Text Size, Color and Font Face

HTML lacks a lot of font styles and characteristics that a lot of text editors have. You cannot format a Web document using HTML as nicely as you could format a page with a word processing program. What you can do with HTML is to specify certain font sizes (1 through 7), select a color from an RGB Color Reference and vary your text colors on your page without a graphics program. You may also select a font-family or specify whether you want serif or sans-serif font face. If the font that you select is not on the users computer when they are viewing your Web page, their browser will select its own default font to replace your selection so you must know that your choice with HTML will not be etched into stone but will vary from one computer or browser type to another.

Size 7 abcdefg...
Size 6 abcdefg...
Size 5 abcdefg...
Size 4 abcdefg...
Size 3 abcdefg...
Size 2 abcdefg...
Size 1 abcdefg...

The first line above was coded like this:
<FONT SIZE="7" COLOR="red">Size 7 abcdefg...</FONT>
The size 6 line was coded this way:
<FONT SIZE="6" COLOR="orange">Size 6 abcdefg...</FONT>
The smallest line above was coded as follows:
<FONT SIZE="1" COLOR="black">Size 1 abcdefg...</FONT>

You can also change font sizes by specifying + or - numbers, as in <FONT SIZE =+1>This is one size larger</FONT> than this.<FONT SIZE=-1>This is one size smaller.</FONT>
This method will not work if you use a size 7 already and try to go a size larger. You are still constrained by sizes 1 to 7 although if you are using a size 3 then you could certainly use a +2, a +3, or a +4 to increase your font size as in

More examples of font size, but with Cascading Style Sheets

A Word About Font C O L O R !

COLOR is an attribute of the FONT tag.  
<FONT COLOR="red">changes the text to red</FONT>  The equivalent RGB color value which represents "red" is #FF0000. You could have also achieved red text by coding
<FONT COLOR="#FF0000">red text</FONT>. The color attribute value of "red" and the color attribute value of "#FF0000" achieved the same results. The value of "#FF0000" is called an RGB color value and the number is always 6 digits, often called a "hexadecimal color value", or "hex value" for short. RGB stands for Red-Green-Blue. While not all colors have names, certainly all colors do have their own specific hexidecimal value (RGB color value). I look up the numbers I need from online references such as
color charts. I also need to mention that when you place either a named color or a value of color (preceded by #), that these values should be coded into parentheses.
For example COLOR="#FF0000" or COLOR="red". The named color is in quotes and does NOT use the octothorp, #. The RGB color value MUST use the octothorp, # before the number containing 6 digits. Both the octothorp and the 6 number are together inside one set of quotes.

I downloadeded a free trial version of a color selector utility from http://www.tucows.com/. I use a program called WinZip from http://www.winzip.com/ to unzip or open the files after I had downloaded the software. These compression programs have a help feature and many have little teaching lessons with them to help you get started.

Hitmill.com has 5 pages now with RGB Hexidecimal color values for Web authors. The index to the color pages is available at http://www.hitmill.com/html/rgbcolorvalues.html.

Place the font size property along with the color property into only one set of font "tags" making up the font element.
<FONT SIZE="5" COLOR="#FF00FF">This is the result of coding both the size and the color property.</FONT>
Note: I just put in the font tags on purpose to illustrate the coding. The actual markup characters do not appear on the Web page but only appear in the HTML document (the coding area). The Web page is the viewing area of the browser and it what the user sees on his own machine but the Web document is what you see when you are coding to create a Web page. The actual typing and coding is not the Web page. When the document is interpreted by the browser and displayed, it is now a Web page. Try not to confuse the HTML document and the Web page. Think of the Web page as being the result of what a browser does with an HTML document.

Each time you code changes of any kind in your HTML document be sure to do a File, Save. When you switch back to your browser to view your changes you will not see the changes unless you REFRESH or RELOAD the page from the browser menu. If your page suddenly has disappeared it is usually from a simple mistake of having an "open" tag somewhere either missing the closing slash or missing the left or the right angle bracket </ >. When you learn later about how to code cascading stylesheets just a missing --> before the end of the </STYLE> will sometimes cause the entire Web page not to view. Keep in mind that the browser is very unforgiving about any coding "typos" or "omissions". If your Web page suddenly does not view properly then look for an error in one of the coded markup "tags" before checking elsewhere.

A Word About Font Face

The FONT element ("tags" and contents between the "tags") has a FACE attribute which allows you to select a font face whereever you would like to do so within the document, even if it is inside a table cell. The major browsers will render your selected font face onto your Web page only if that particular font face is a font already installed on your computer system. If the font face which is named is not available you may specify an alternate font face to use by putting a comma and a space between your first and second selections and you may also specify a general family of font such as script, serif, sans-serif. Here is an example of specifying a font face:
<FONT FACE="Tahoma, sans-serif">This is Tahoma font face, or sans-serif if Tahoma is not available.</FONT>
<FONT FACE="Times New Roman, serif">Times New Roman font face, or serif </FONT>
<FONT FACE="Comic Sans MS, script" SIZE="5">Comic Sans MS font face, or a default script font face </FONT>
The font faces do not really become that noticeable on a Web page until the size is appreciably increased as for a title or subtitle. I will illustrate with the H4 title size:

Times New Roman

Comic Sans MS, or default script


Tahoma or default sans-serif



Special Note:
When your Web page is published, or uploaded to the Web server, any font face that you specified will show as intended only if that is a font also available on the user's (surfer on the Internet) computer. If their computer does not have a font installed that you specified, it will go to your second choice font, or a "default" font, if you specified a general font group such as sans-serif. If you did not specify more than one choice and the user does not have that font, your page element font face will default to the default font face of the user's computer. It is beneficial to you as the Web author to select a first choice of font face, a second choice, and a general group.

Now that you have completed this over-view of the FONT element you can practice combining various combinations of size, color and face. HTML books will have additional information about formatting text and fonts. If you should happen to begin using a stylesheet whether it is an external stylesheet or an internal one do not also use FONT elements. Once you graduate to stylesheets you will need to delete the <FONT></FONT> sprinkled throughout your HTML document.

Note: When consulting a straight HTML reference book, look for the term FONT or FONT FACE in the index. Later when you study formatting with the CSS rules (Cascading Style Sheets) the terminology changes to font-family. Additional information is available in the Introduction to Cascading Style Sheets (CSS).




© hitmill.com
All Rights Reserved