One of the first HTML tags that we learned were the headers tags <h1> ... <h5> which allow you to add larger headings. But what about when you wish to have more control over fonts? HTML provides a number of ways to change font face, size and color. We will briefly touch on the old way of doing this using the <font> tag -- but this is just so that you will understand the tag when you see it. The better way to control fonts is with styles. Fortunately, using styles is even easier! You'll see what I mean in a moment.

HTML Fonts -- the old way

The old way of controlling fonts is with the <font> tag together with "size", "face" and "color" attributes. For example:
    <font color=red>wow, that's red!</font>

While that was lots of fun, the <font> tag quickly led to a huge mess. Web pages became cluttered with zillions of <font> tags and changing the layout of a page became a bit of a nightmare. The solution to this problem is "Cascading Style Sheets". Style sheets allow us to create much smaller and more flexible web pages. They also allow us to change the style of fonts across an entire website in just seconds.

HTML Fonts -- the new way -- with "style"

We won't cover Cascading Style Sheets just yet but to go in that direction, we will use the "Style" attribute to control fonts. This is a good first step.

Earlier we learned to use the style attribute to change color of text like this:
    <p style="color:blue">I'm so blue!</p>

The style attribute is very flexible, you can add it to almost any HTML tag (rather than using a new "font" tag) and you can add several style properties at once by separating them with semicolons. (See examples below). But first take a look at this simple comparison between the font tag and the style attribute. Load up HTML-Help-Toy yourself and try some different HTML font and style combinations.

Controlling Fonts with style values

For a full list of style font properties, check out WC3 CSS Font Properties. A few useful examples are listed below - try these out yourself in HTML-Help-Toy.

  <p style="font-size:12pt; color:green">12pt green</p>
  
  <p style="font-family:arial; color:maroon">arial maroon</p>
  
  <p style="font:bold italic 14pt serif">serif italic 14pt</p>

There's lots more to learn about controlling fonts with Styles and Style Sheets but that will come later after you have mastered the basics of HTML. Remember, this tutorial is not going to try to be comprehensive. Rather, I just want you to be come comfortable with some of the outline elements. Then you can learn the others really easily!

Next in our tutorial is a very important item: creating HTML tables. Don't worry, this is going to be easier than you would imagine.