Lessons

Home
Storing your Page
Basic HTML
Essential Tags
Text Characteristics
Text Appearance
Color Settings
Creating Lists
Creating Tables
FAQs
HTML Assignment

It is quite easy to change the appearance of text in font style, size, color, or its attributes such as bold, italic, or underline.  The basic font tag is like this:

<BODY>
Here is your regular text, <FONT>text that you would like to be affected by special attributes will go inside of these tags. With the particular attribute (as noted below).</FONT>
</BODY>

Font Style

Every browser has a default font setting - font name, size and color. It is possible to alter these preferences in your browser, but most likely, the default is Times or Times New Roman 12pt (which is font size 3 in the scale noted below) and it's black. However, one can specify font names other than the defaults, like Courier and Verdana.

First, Add the Font Tags around the section of the text you would like to alter:
<BODY>
This is my <FONT> special bit of text.  </FONT>
</BODY>

Then specify a FONT attribute.
<BODY>
This is my <FONT FACE=”Times New Roman ”> special bit of text. </FONT>
</BODY>

This example would be displayed as:
This is my special bit of text.

Some fonts that tend to be a safe bet that virtually all users will have are:
Arial, Courier, Georgia, Times New Roman, Verdana

Font Size

Fonts come in 7 sizes:

1        2        3       4      5     6   7

First, Add the Font Tags around the section of the text you would like to alter:
<BODY>
This is my <FONT> special bit of text.  </FONT>
</BODY>

Then specify a SIZE attribute.
<BODY>
This is my <FONT SIZE=5> special bit of text. </FONT>
</BODY>

This example would be displayed as:
This is my special bit of text.

Bold

This is my <B> special bit of text. </B>
Would display:
This is my special bit of text.

Italic

This is my <I> special <B>bit of text.</B> </I>
Would display:
This is my special bit of text.

Underline

This is my <I> special <B>bit of <U>text. </U></B></I>
Would display:
This is my special bit of text.

Using them in combination

Obviously, as we have in the preceding two examples, one can use these (and other) tags in combination.  You can also mix sizes and font styles.  However, it is best to not shuffle the order of the tags, which would confuse the browser.  Instead, one would need to “Nest” them, which places opening and closing tags of the same type, in the same order moving away from the text.  For example, the order of the following tags is Italic, Bold, Underline.  Therefore, the closing tags should be in the exact opposite order, thereby placing the like tags closest to the actual text.

This is my <I> <B><U> special bit of text.</U> </B> </I>

Font Color

Although, you can set the font color for an entire page (or an entire division ) as you will see below, you can also change the font on specific lines.

This is my <FONT COLOR="#FF0000">special bit of text. </FONT>
Would display:
This is my special bit of text.


Click HERE to proceed to the Color Settings Tutorial

 

Notes

Custom Fonts:
A font will only display if your viewer has that font installed on their computer. In other words, if the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very sensible in your use of fonts.