Computer Science 8 - Lab 8 HTML

Introduction

In this week's lab you are going to work with specifying font types, sizes, and colors.

HTML includes the <font> tag for specifying font information. However, it is not very good, at least for specifying a size. You can only tell it to use a size from 1 to 7, but what does a size of 1 or 7 mean?

A much better way of specifying font information is with CSS, or Cascading Style Sheets. With CSS, the exact font type, size, and color can be specified.

Changing Some Fonts

In your web page, add the following in the <HEAD> section, after the title. (If you are not sure where to put it, view the page source for this page and search for the STYLE tag.)


<STYLE type="text/css">
<!--
BODY
   {
   color: white;
   background-color: black;
   font-family: Arial, sans-serif;
   font-size: 12pt;
   }
-->
</STYLE>

STYLE is a CSS tag that is used to define attributes (such as size, color, etc.) for the various tags in your web page. The above is telling the browser that within the BODY tag (which is everything on your page), have the font color be white, have the background color be black, use Arial for the font type (or sans-serif if Arial is not available), and 12pt for the size.

What is particularly nice about the above is that the font size is set to a very precise value (12 points) instead of some almost-meaningless number like 1.

You will notice in looking at your web page that even though the font size is set to 12, your headers are still displayed differently. This is because tags such as <H1> have default font values. However, you can change this as well.

In your STYLE tag, add entries for the H1 and H2 tags. When you are finished, the STYLE tag definition will look as follows:


<STYLE type="text/css">
<!--
BODY
   {
   color: white;
   background-color: black;
   font-family: Arial, sans-serif;
   font-size: 12pt;
   }
H1
   {
   color: red;
   font-family: Courier New, serif;
   font-size: 24pt;
   }
H2
   {
   color: green;
   font-family: Courier New, serif;
   font-size: 18pt;
   }
-->
</STYLE>

If your page does not use any H1 or H2 tags already, add them so there is at least one of each. Save your changes and refresh your page in the browser and observe the results.

Play around with the STYLE definitions by changing some of the colors and sizes. Make sure to save your changes and refresh your page in the browser to view the results of your chnages.

You could, of course, add definitions for the other header tags as well.

After completing this lab, you should know how to use the STYLE tag to set the font type, color, and size for the web page and any headers on the page.

CSS is actually much more powerful than what has been demonstrated here. There are a large number of tutorials on the web for anybody interested in exploring further.