Text and more style


Headings can be created with the h1 h2 h3 h4 h5 h6 containers. h1 is the largest heading; h6 is the smallest heading.

Text style

There are a number of style properties that affect the appearance of text. You can use these styles to change a word or two in a span container. You can also use these styles with a p or div, or other container.

propertycommon values
font-weightbold     bolder     lighter
text-decorationline-through     underline
text-transformuppercase     lowercase

I am not sure about font-stretch and text-shadow.

Font families

One of the most common things you can do to specify the appearance of text is to specify the font family. There are five generic font families. These five are supported by all standard browsers.

  • serif
  • sans-serif
  • monospace
  • fantasy
  • cursive

You may wish to express a preference for some other font family, which may, or may not, be available. You can do this, because you can specify a list of possible font families. Examples:

  • 'Times New Roman', serif
  • 'Courier New', monospace

Put you favorite choice first.
Always put one of the five generic font families last.
Separate the choices with commas.
If the font name contains a space, put the name in single or double quotes.
Never put the generic font family names in quotes.

A good example of font families is:

  • Arial, Helvetica, sans-serif

Provide for all three possible font-families; you cannot be sure what font-families your user will have. Arial is usually best for Microsoft users. Helvetica is usually best for Apple users. sans-serif is the last resort; it is a generic name, and will be matched by whatever font-family is available of this general kind.

These lists of font families are used as the value for the font-family property.

Font size

The standard font sizes are:
xx-small x-small small medium large x-large xx-large

There has always been a problem with the default size.
Internet Explorer may use small as its default size.
Other browsers use medium as their default size.

You can also specify the size as larger or smaller, which produces one size change from what would have been used otherwise.

You can also specify the size as a percent of what would have been used otherwise.

It is not a good idea to specify the font size in pixels. This may cause problems with Internet Explorer.

The font size value is used in the font-size property.


The color of the text is set with the color property. The background color of any container is set with the background-color property. We saw these in the chapter on color.

Older style tags

Usually, we will use styles to affect the appearance of our pages. There are also two sets of older tags, that can be used to change the appearance of text in our pages. They are called Logical Style Tags and Physical Style Tags.

Lab 5

Now you are ready to build your lab 5 web page.
Follow the link on the left to read the lab 5 requirements and build your lab 5 web page.

Put your web page on the Internet

Upload your index.html page, your lab5.html page and your lab5.css file to our Internet server, voyager.
Be sure to upload your lab5.css file.
Do this the same way you uploaded your lab 2 page.

State lab subject

Next week we will begin using a new lab topic. You may now Select a state of the United States of America, or select a foreign country. ( It would be good if you also select second and third choices, in case your first choice is not available. )

Complete Lab 5

You have built your lab 5 web page and uploaded it to voyager.
Look at the page with your Firefox browser, to make sure the page works correctly on voyager.
Then, log in to Canvas and submit assignment 5. The submission should provide the following information:

  • It should say that you have completed Lab 5.
  • It should request the topic you wish to use for lab 6.

Reading assignment

Read information that your find relivant from the book you selected.