• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 22. Web Page Layout > Creating Headlines

Creating Headlines

One hassle in Web design is headlines created from a graphic, which usually means creating a new graphic for every headline. Using the CSS background property, however, you can create as many different title graphics as you want—without having to create new graphics and without incurring the additional download time involved with using text in graphics.

To create a headline with a graphic background:


Create and save your background in a graphics program. Call the graphic something like background_headline.gif (Figure 22.6).

Figure 22.6. The background graphic that will be tiled behind headlines.

h3.graphic {...}

Add a CSS rule for the <h3> tag (Code 22.5) with an associated class of graphic (see "Defining Classes to Create Your Own Tags" in Chapter 2). Include the background attribute, and point to the graphic you created in step 1 (see "Setting the Background" in Chapter 6).

Note: You do not have to call the class created in step 2 graphic; you may call it anything you want.

Code 22.5. Applying a background graphic to a header is fairly straightforward, but the possibilities are infinite.


<h3 class="graphic">CHAPTER VII<br>
→ A Mad Tea-Party </h3>

Whenever you use level-3 headings in your document, your background graphic will appear behind them as long as you include the class attribute and set it to the class you added in step 2 (Figure 22.7).

Figure 22.7. Two header examples. Play around with other graphics, different borders, and even different padding in the titles for other effects.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint