WEB STANDARDS CREATIVITY

18
Content highlights
With the backgrounds, masthead, and main navigation sorted out, we can look a little closer at a few interesting happenings
within the main content area. We’ll explore the headings, tables, and definition lists.
Headings
The Dirty Pretty Things website makes great use of level 2 () and 3 () headings. Most notably, level 2 headings are
used at the top of both the main content area and the sidebar on all pages, yet have different appearances. This is achieved
using descendant selectors in the style sheet.
The following markup reflects a simplified sidebar. Note that the element in the main content does not have a unique
ID or class either.
The Band
Dirty Pretty Things are Carl Barat, Anthony Rossomando, Didz Hammond and Gary Powell.
Figure 1-9 shows the two background images used for the two elements.
Figure 1-9. Two jagged background images are used for the two differently sized level 2 headings.
The CSS rules for , as used in the main content area, are relatively straightforward. Note that blackhead.gif is specified
as a nonrepeating background image, and that enough padding is used to ensure the whole background is in view.
h2 {
margin:0 0 2px –10px;
padding: 6px 0 5px 13px;
font:14px/165% italic Georgia,Arial,Helvetica,sans-serif;
letter-spacing:0.2em;
color:#FFF;
background: #EAE5D8 url(images/blackhead.gif) left bottom no-repeat
}
Now, we move on to the for the sidebar. The clever part is done with a descendant selector. The selector #sidebar h2
tells the browser to apply these rules instead when the element is inside the sidebar. If a match is found, a different
background image, blackheadside.gif, is used, and the margins and font-size are scaled down.
#sidebar h2 {
margin-top:3px;
font-size:12px;
background: #EAE5D8 url(images/blackheadside.gif) left bottom no-repeat;
}