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.

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.

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

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.

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.

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.

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.

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.

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. )

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.

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