Section Two - Getting Started
Lesson 2-6: Font Sizes, Colors, and Faces
In this lesson you will learn how to change the size and
color of text, and also how to change a
font face itself.
This is done with the font /font tag.
The SIZE attribute of the FONT element is used to change the size of text.
The SIZE attribute is placed inside the opening FONT tag.
Size can be designated in absolute or relative values.
For general purposes, relative values are probably the easiest to use.
Size is designated relative to the size of the default font.
The default is what you see if you don't make any changes yourself.
| displays as: SIZE="+2"|
displays as: SIZE="+1"
|The "normal" text size is called the default.
|| This is the default size.
displays as: SIZE="-1"|
displays as: SIZE="-2"
Here are some more examples:
You can change the color of text with, you guessed it, the COLOR attribute.
There are two ways to designate color: using official color names, or using hexadecimal color codes.
Names can be used only for the most common colors; so, as a general rule, always use codes rather than names.
It is both fun and easy to color text on a web page, but don't go overboard on using font colors.
In fact, unless you have a good reason, it is best to avoid the temptation to use too much colored text.
Here are some examples of colored text:
| displays as:
You cannot make up your own color names,
- you may only use approved HTML color names.
However, not many colors have approved names.
There are only 16 colors with approved names which can be used safely with (almost) all browsers and computers.
Of the more than 16 million colors that most new PC's can display,
only 124 other colors have approved names which you can use.
However, many older browsers do not understand color names,
so it is always best to use hex color codes.
Names are easier to remember than hex codes, though,
so named colors can save you time when you are in a hurry.
Take a look at this popup
chart of HTML color names to see the colors which have official names.
Remember, these color names may not be understood by some older browsers.
- When you use hex color codes, you must use the "#" symbol before the code number.
- When you use color names, you must NOT use the "#" symbol before the name.
- Spaces are not used in color names. For example: DarkGreen works,
but Dark Green does not.
- You can use lowercase, UPPERCASE, or MixedCase for color names.
C. Font Face
The font FACE can also be changed. However, unlike SIZE and COLOR,
you are likely to experience trouble with the FACE attribute. The reason why is that if the font you designate
is not installed on the reader's computer, the reader will just see the default font face.
There is no guarantee that the majority of your readers will have the font you designate.
It is best for beginners to avoid using the FACE attribute, except for the most common fonts.
Here are some examples of some very common font faces:
|| displays as:
|| displays as:
|| displays as:
|| displays as:
Do these font faces all look the same on your computer screen? If they do, the problem is probably caused by one of two reasons:
either you do not have these fonts installed in your computer, or you are using a Japanese operating system.
Even if you have these fonts installed on your computer, browsers running under Japanese OS's
generally ignore any non-Japanese font face designations
and just use the default Japanese font to display your text.
Until the software makers find a solution for this problem,
you can see why it is often a waste of time to use the FACE attribute.
Say, how would you like to be able to quickly try out different colors, sizes, font faces,
background colors and graphics to see how they would look on your page? You can with Joe Barta's
snazzy Color Picker. It's a lot of fun.
Click the button below to try it out. Don't forget to come back and do the practice exercise below.
The Color Picker will open in a new window. Just close that window to return here.
ps. Thanks, Joe, for the great freeware!
, open your practice file with your text editor and add the red text:
titleMy First Home Page/title
h1 align="center"HTML Tips and Tricks/h1
This is a sentence with spaces
between the words. The extra spaces are ignored.br
This sentence uses
space codes between the
You will find many helpful hints here on how to construct web pages.
Basic home page creation is not difficult. However, once you learn the basics,
you will want to try to do many things which you see on other people's pages on the Internet,
The tips on this page should help beginning web page authors to learn new tricks and techniques./p
This is bbold text/b.br
This is iitalic text/i.br
This is uunderlined text/u.br
This is bigbig text/big.br
This is smallsmall text/small.br
This is supersupscript/sup text.br
This text is biguibbig, bold, italic, and underlined/b/i/u/big.
This text is font size="+1"large/font,
and font size="+3"even larger/font still.
This text is font color="#FF0000"red/font,
font color="#0000FF"blue/font, and
Save your file, and look at it with your browser. To see what the result should look like,
- The font
tag is used to designate different font sizes, colors, and faces.
- The SIZE attribute is used to designate sizes relative to the default font from -2 to +4.
- The COLOR attribute designates font colors using hexadecimal color codes.
- The FACE attribute designates font face using the name of the font.
- The FONT tag with attributes looks like this:
font size="±n" color="#nnnnnn" face="FontName"text/font
- Avoid using color names because they are not understood by older software.
Make it a habit to always use hex codes.