ipl

ipl Learning HTML

More Fonts and Text Styles

WARNING! You really shouldn’t use the <font></font> tags once you understand HTML better and after you learn CSS (which we’ll explain a little later). However, since you’re just starting to learn HTML, go ahead and use them for now.

As you just learned, the web browser assumes a default value for the font size. Well, the web browser also assumes a default value for the font face, which is Times New Roman, and the font color, which is black. But, I am going to show you how to change them by writing attributes and values…just like we did with the font size!

To change the value for the font face, you need to use the font tags once again. Also, you need to include a face attribute, which is simply the name of the font you want to use. For example:

<font
red arrow pointing up
start tag		 face=
red arrow pointing up
attribute 		"Arial">
red arrow pointing up
value 		Woo-Hoo! I’m learning HTML! </font>
red arrow pointing up
end tag

Here is a quick list of just some of the faces that you can use:

  • Arial
  • Arial Black
  • Arial Narrow
  • Book Antiqua
  • Bookman Old Style
  • Century Gothic
  • Century Schoolbook
  • Courier New
  • Garamond
  • Times New Roman
  • Verdana

To change the value for the font color, you need to use…can you guess what it is? …yep, the font tags. Also, you need to include a color attribute and value:

<html>
<head>
<title> Learning HTML </title>
</head>
<body>
<font color="orange"> Woo-Hoo! I’m learning HTML! </font>
</body>
</html>

As for giving a value, you can do as I did and type in the name of a color. Or, instead of typing in a color name, you can place a code which will allow you to specify the exact color you want. For instance, in the example above, I used the word Orange. But, instead, I could of typed this:

<font color="#FF9900"> Woo-Hoo! I’m learning HTML! </font>

Just keep in mind that using a color code is safer since color names only work with Netscape web browsers.

Wondering if you can put more than one attribute in a tag? Say, for instance, you want to change the size, face and color. No problem! Just put all the attributes into the start tag:

<html>
<head>
<title> Learning HTML </title>
</head>
<body>
<font size="6" face="Comic Sans MS" color="#FF9900">
Woo-Hoo! I’m learning HTML! </font>
</body>
</html>

Well, you have just learned the basics on Fonts and Text Styles. Yeah! Now, let’s move on to the real fun…making links to other web pages. right arrow

Previous | Index | Next

This resource originally created by Deborah Dunk.
Revised and edited by Michael Galloway in 2005 & in 2006.