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

Style Classes

This is a "teach yourself" book, so you don't have to go to a single class to learn how to give your pages great style, although you do need to learn what a style class is. Whenever you want some of the text on your pages to look different than the other text, you can create what amounts to a custom-built HTML tag. Each type of specially formatted text you define is called a style class.

A style class is a custom set of formatting specifications that can be applied to any passage of text in a Web page.

For example, suppose you wanted two different kinds of <h1> headings in your documents. You would create a style class for each one by putting the following text in the style sheet.

h1.silly {font: 36pt Comic Sans;}
h1.serious {font: 36pt Arial;}

To choose between the two style classes in an HTML page, you would use the class attribute, as follows:

<h1 class="silly">Marvin's Munchies Inc.</h1>
Text about Marvin's Muchies goes here.
<h1 class="serious">MMI Investor Information</h1>
Text for business investors goes here.

The words Marvin's Munchies Inc. would appear in 36-point Comic Sans to people whose browsers support style sheets (assuming you included a <link /> to the style sheet at the top of the Web page and assuming he or she has the Comic Sans font installed). The words MMI Investor Information would appear in the 36-point Arial font.

What if you want to create a style class that could be applied to any text, rather than just headings or some other particular tag? You can associate a style class with the <div> tag (which, as you may recall from Hour 5, "Text Alignment and Lists," can enclose any text but doesn't do anything except what its align or other attributes indicate).

You can essentially create your own custom HTML tag by using div. followed by any style class name you make up and any style specifications you choose. That tag can control any number of font, spacing, and margin settings all at once. Wherever you want to apply your custom tag in a page, use a <div> tag with the class= attribute followed by the class name you created.

For example, the style sheet in Figure 16.3 includes the following style class specification:

div.footnote {font-size: 9pt;
              line-height: 12pt;
              text-align: center;}

This style class is applied in Figure 16.4 with the following tag:

<div class="footnote">

Everything between that tag and the accompanying </div> tag in Figure 16.1 appears in 9-point centered text with 12-point vertical line spacing. The same style class was also used on the footnote in Figure 16.2.

Share This