Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
    • A Basic Style Sheet
    • CSS1 Versus CSS2
    • Older Web Browsers
    • Style Properties
    • Style Classes
    • Specifying Inline Styles
    • Positioning and Layers
    • Summary
    • Q&A
    • Workshop
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

A Basic Style Sheet

Despite their intimidating power, style sheets can be very simple to create. Consider the documents in Figures 16.1 and 16.2. These documents share several properties that could be put into a common style sheet.

Figure 16.1 This page uses a style sheet to fine-tune the appearance and spacing of the text and background.

Figure 16.2 This page uses the same style sheet as the one in Figure 16.1.

• They use the Book Antiqua font for body text and Prose Antique for headings.
• They use an image named parchmnt.jpg as a background tile.
• All text is maroon colored (on a color screen, not in this book!).
• They have wide margins and indented body text.
• There is lots of vertical space between lines of text.
• The footnotes are centered and in small print.

Some of these properties, such as text color, background tile, and centered small print, are easy to achieve with ordinary HTML tags. Others, such as line spacing and wide margins, are beyond the scope of standard HTML. All of them can now be achieved easily with style sheets.

Figure 16.3 shows how an HTML style sheet that specified these properties would look.

Figure 16.3 A single style sheet can specify the properties of any number of pages. Figures 16.1 and 16.2 both use this style sheet.

The first thing you'll undoubtedly notice about this style sheet is that it doesn't look anything like normal HTML. Style sheet specifications are really a separate language.

Of course, there are some familiar HTML tags in there. As you might guess, body, p, h1, h2, a, and div in the style sheet refer to the corresponding tags in the HTML documents to which the style sheet will be applied. In curly braces after each tag name are the specifications for how all text within that tag should appear.

In this case, all body text that isn't within some other tag should be rendered at a size of 12 points, in the Book Antiqua font if possible, and with the color maroon and 16 points between lines. The page should have 10-point margins, and the background should be the image found at the relative URL parchmnt.jpg.

Any paragraph starting with a <p> tag will be indented an additional 24 points.

Any text within <h1> or <h2> tags should be rendered in boldface ProseAntique at a size of 24 points and 18 points, respectively. If a user doesn't have a font named ProseAntique installed, the Lucida Handwriting font will be used instead.

The pt after each measurement in Figure 16.3 means points (there are 72 points in an inch). If you prefer, you can specify any style sheet measurement in inches (in), centimeters (cm), pixels (px), or widths-of-a-letter-m, which are called ems (em).

To link this style sheet to the HTML documents, you include a <link /> tag in the <head> section of each document. Figure 16.4 is the HTML for the page in Figure 16.1. It contains the following <link /> tag:

Figure 16.4 When viewed in Netscape Navigator or Microsoft Internet Explorer (version 4.0 or later), this page looks like Figure 16.1. In older browsers that don't support style sheets, it looks like Figure 16.5.

<link rel="stylesheet" type="text/css" href="hhh.css" />

This assumes the style sheet was saved under the name hhh.css in the same directory folder as the HTML document. Netscape Navigator 4 and Internet Explorer 4 and later will then give the body and heading text the properties specified in the style sheet, without the need for any <font> tags or <body background> attribute in the document itself.

Share This