Page One 1 HTML: Fonts And Colors

We saw on the last page that we could change the size of our text by using the header tag and assigning it a number. This is great, but since the header appears on a line by itself you can't use the header tag to adjust the font size of individual characters. To remedy this situation we have two tags at our disposal, the and <basefont> tags.

The tag can be used to adjust the size of our text as well as a few other things. As with the other tags, the tag has its paired ending tag . Font sizes are specified by a number, 1 being the smallest and 7 being the largest. If no number is used then your browser defaults to a font size of 3. Here's how it would look:

Your text goes here

The "font" tag can also be used to change the size of individual letters. Below is an example of using the font tag to change some text:

This text is font size 7.
This text is font size 4.
This text is size 3, the default size.
This text is font size 1.

You can mix sizes.
You can use it on individual letters.

The <basefont> tag is used to change the font of all the text on the entire page. The default size of 3 is not set in stone. The advantage of using the "basefont" tag is that all your font sizes become relative to the basefont size. The basefont tag is placed at the top of the page, that is, right below your <body> tag. You then specify in your tag a size that is "+" so many sizes larger than the basefont size or "-" so many sizes. Your tags would look something like this:

, this would be 2 sizes larger than your basefont size, or, , this would be 3 sizes smaller than your basefont size.

But why not just use a regular font size tag each time you want to change a font size? The best part of a basefont tag is that everything is relative. This means that if you have created a page that has many font size changes, and after viewing your page you decide to change all your font sizes up one size, then instead of going through the whole page and changing every individual tag all you need to do is change the base font tag up one size which in turn will change all font sizes up one size. Makes your job that much easier.

Okay, now I can change the size of my text, but I've seen web sites with all kinds of fancy typefaces. How do they do that? Since you asked, besides having the size attribute, the font tag also has the face attribute. In this case "face" means font face or style of font. Your computer has the ability to write in many different font styles and that gives you the ability to use that on your web pages. To do that you use the face attribute with the font tag like this, . The question mark stands for the name or names of the font style you wish to use. When using more than one font style, separate each style with a comma. Also, surround your font style name(s) with quotation marks such as are on each side of the question mark. The default font style is "Times New Roman". Every ones computer has this font style installed.

Now for the down side of fonts. You can specify any font your heart desires, but unless the computer of the person viewing your page has that font installed, only the default font will be shown. Try typing on your practice page and then follow it with some text. Since there is no font named "my font", the browser showed the default font. Most web page creators use only a few different font styles that are the most common. I stick with . When giving the browser more than one choice you are bound to hit on at least one that is installed.

A Little Color Please

This paragraph starts a transition into colors and the basics on using them. The tag also has the color attribute. I could go on for pages about colors, but since this is the basics we will cut to the chase. Colors are assigned a six digit code. These values are in the format of "#rrggbb", where the "rr" stands for red, the "gg" stands for green, and the "bb" stands for blue. The two values for each color are a combination of numbers and letters, that is what makes up the six digit code. This code is "hexadecimal" numbers. You don't need to know all about hexadecimal numbers to use colors, though. After all, there are millions of possible color code combinations. Fortunately for us there are only 216 RGB codes that have been deemed safe for use on the Web. This means that these 216 colors will look good on any ones monitor regardless of the surfers settings.

Now for those of you who do not wish to try and keep up with 216 numbers we do have a set of colors that are called the "X11 color set". This is a set of colors that can be used by either writing their hex code number or by specifying a name corresponding to each hex code. I use a combination of hex code and color names on these pages. You will probably find a relatively small set of colors that you will use again and again.. Just one small item to keep in mind. Since you have the ability and control over what colors are used, remember that not all color combinations are pleasing to the eye. It is important to go with a color scheme that is easy on the eyes. High contrast colors may look flashy for a brief moment but you wouldn't want to spend any amount of time looking at them. You'll be wanting surfers to spend time on your pages and you'll want them to come back......don't scare them away with loud colors or next to impossible to read color combinations.

There are two more common items of which we can control the color. The first is text. We have two ways of accomplishing this task. The first method is to use a text attribute in the body tag as such, <body text="color"> where color is either the hex code number or the color name. This method changes all the text on the entire page. This is great, for instance, if you had a poetry web site and you wanted to use a different color for each authors work, or to help set a mood, or whatever reason.

The second method of changing text color is to select specific portions of your text to change or highlight. This is done by using the color attribute with your tag as follows, , here color is also the hex code number or the color name.

The second most common item you may wish to change the color of is your links. The <body> tag also has the link attribute. Here is an example, <body link="color" vlink="color" alink="color">.

link	a link the surfer has not clicked yet
vlink	visited link, a link the surfer has already been to
alink	active link, a link that is in the process of loading

For the most part the defaults for the links will do just fine. Most surfers are used to the standard colors and have become aware of what they mean. There will come a time when it will be necessary to change your link colors. An example of this is on my "home" page. The border on the left side of the page contains my links to the internal pages of this site. I changed the link colors to make it easier to see them as the default colors blended in too well. In a case such as this, by all means, change your link colors. Make life as easy as possible for your visiting surfers.

I threw in one attribute in the above table that we hadn't covered on this page, bgcolor. The background color attribute works the same as the other color attributes in that you specify a hex number or use a color name. It can also be used in conjunction with the link attributes as follows, <body bgcolor="?" link="?" alink="?" vlink="?">. The only difference is that bgcolor changes the background color of the entire page. We have covered several formatting tags and color tags and a few miscellaneous tags on the last few pages. All of these HTML tags can be used to enhance a page and make it look spiffy, but over use of these elements can really make your page look worse or even just plain old ugly. Use all HTML elements in moderation or else you may end up on somebodies "10 Most Tacky List".

Home HTML Page Top of Page Next Page Back Page

Liven Up Your Page With Fonts

A Little Color Please