Constructing Content - HTML5 with CSS3 - page 135

For better cross-browser consistency, you can first declare a set of base sizes for common headings in
your style sheet. For example:
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
Then, to preserve some visual hierarchy when headings appear in nested elements, you could expand that
set of rules with a few descendant selectors:
h1 { font-size: 200%; }
h2, section h1 { font-size: 150%; }
h3, section h2 , section section h1 { font-size: 120%; }
h4, section h3 , section section h2 { font-size: 100%; }
The selector “ section h1 ” selects any h1 element that occurs within any section element. Grouping that
descendant selector in the same rule with the h2 selector means any h1 within a section will be the same
size as a regular h2 . Drilling down one more level with “ section section h1 ” will make any h1 that is a
descendant of a section that is itself a descendant of another section the same size as a regular h3 .
Figure 4-39 is the same markup in Opera again, now with some visual hierarchy.
Figure 4-39. A few descendant selectors establish some visual hierarchy in nested section s
You could take this a lot further, adding complex descendant selectors for article s within section s,
section s within article s, article s within article s, aside s within section s, and so on and so forth,
but there's no reason to go crazy establishing base styles for every possible markup situation; only those
you actually need.
If your particular website frequently calls for nesting an article in an aside in a section in an article ,
then you could include a descendant rule for a heading in that context ( article section aside