Foundation HTML5 with CSS3

Constructing Content

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 sections

You could take this a lot further, adding complex descendant selectors for articles within sections,
sections within articles, articles within articles, asides within sections, 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