The 24-Hour HTML CafeReturn to the Home Page

Hour 15:
Using Style Sheets

In this hour, you learn that a style sheet can control the appearance of many HTML pages at once. It can also give you extremely precise control over typography, spacing, and the positioning of HTML elements. You also learn that, by adding a STYLE attribute to almost any HTML tag, you can control the style of any part of an HTML page without referring to a separate style sheet document.

(View HTML tags covered in Hour 15.)

Example Pages Shown in the Book

Distinguishing Features andChild's Play
(Figures 15.1 - 15.5)

Both of these pages use the same style sheet (hhh.css) to fine-tune the appearance and spacing of the text and background. Here's how the first page looks in various Web browsers (if the specified fonts are installed on the user's computer):

Refractal Design(Figures 15.6 - 15.8)

A page which uses inline styles to control the positioning of text and graphics. Notice that images, including transparent GIFs and GIF animations, can be positioned to overlap one another. Here's how this page looks in current vs. older Web browsers:

Additional Online Examples

The page you are reading now, and all the other pages at the 24-Hour HTML Café, include <LINK REL="stylesheet" HREF="../htmlcafe.css" TYPE="text/css"> just before the </HEAD> tag. This links to an external style sheet named htmlcafe.css, which controls the appearance and indentation of the text. This ensures that the formatting is consistent throughout the site, and allows me to change the style of the whole site by editing a single document. If you select View | Source right now, however, you'll notice that I still use the old-fashioned <BODY> tag attributes to set the background and text colors. This ensures that older browsers display the page acceptably.

Key Quote from This Hour

"There are actually two different languages to choose from when you make a style sheet. The one I recommend you use is called Cascading Style Sheets, Level 1 (CSS1), since it is and it is compatible with both Netscape Navigator and Microsoft Internet Explorer. The new CSS2 standard is only partially implemented in the current crop of browsers, and neither Netscape nor Microsoft are currently claiming that their next version will fully support CSS2. They do already support some parts of CSS2, such as the ability to precisely position text and graphics on the page."

Next Hour: Embedding Multimedia in Web Pages

Return to the Home Page