| 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 wantwithout having to create new graphics and without incurring the additional download time involved with using text in graphics. In this example (Figure 21.4), we will be adding styles to the default.css file that is being linked to our structured HTML code shown in Code 21.2. I added styles to the first three heading levels (which are the only three we use in the code) and a graphic background to the main page header. Figure 21.4. The site header now has a very Web 2.0 look, while the Table of Contents and chapter headers have more distinction. 
To create a headline with a graphic background: 1. | header_01.png
Create and save your background. Call the graphic something like header_01.png (Figure 21.5).
Figure 21.5. The background graphic used to create the Web 2.0 effect for the site header. 
| | | 2. | h1, h2, h3 {…}
In the default.css file, set all of the style properties you want your heading elements to have in common (Code 21.5). In this case, I've set no margin or padding on the bottom.
Code 21.5. default.css Add this code to style the headers defined in Code 21.2. h1, h2, h3 { padding-bottom: 0px; margin-bottom: 0px; } h1 { font-size: 28px; } h2 { color: #666; } h3 { margin-left: 8px; font: small-caps bold 18px "Helvetica Neue Narrow", Arial, Helvetica, sans-serif;} #header { height: 100px; color:#fff; border: 1px solid RGB(255,204,204); border-bottom: 2px solid #999; background: #f99 url(header_01.png) repeat-x; padding: 0px 8px; } .authorName { font: 18px "Helvetica Neue", Arial, Helvetica, sans-serif; } h2 .chapterTitle { display: block; font-size: smaller; color: black; }
|
| 3. | h1 {…}
Set all of the specific styles for each of the heading levels, generally colors and font sizes. You want the header to stand out from the rest of the content, without overwhelming it.
| 4. | #header {…}
To create a compelling graphic header for your page, add a CSS rule for the #header element. Include the background property, and point to the graphic you created in Step 1 (see "Setting Multiple Background Values" in Chapter 5).
| 5. | .authorName {…}
You can identify parts of a title for special treatment, as with the author's name in this example.
| 6. | h2 .chapterTitle {…}
Another good trick is to use contextual selectors with a class to specify how the class should look if it is in the header (see "Defining Selectors Based on Context" in Chapter 2). This way, you could define separate styles for the .chapterTitle class in case it is not in a title (for example in a footer or in navigation).
|
|
