Question

HTML5’s new outlining structure causes user agents to render headings using the same tag at different sizes as you descend through sections. Is there a way to control this, preferably through a CSS selector?

I like to use the “h1 for everything” approach, since I can move sections in and out of the outline without re-tagging the headings, but I can’t think of a way to control exactly what styles the user agent uses for each level.

Ideally I would be able to say something like h1:level1{ font-size: 18pt }, which would only change the section headings and h1:level2 to select the sub-section headings. Granted, I could just as easily use section h1 and section section h1, but I’m wondering if there is something cleaner than repeating “section” for as deep as my outline goes.

Answer 1

Set your font size in ems, then set your section‘s font-size to be anything under 1em.

For example:

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

Here’s the fiddle: http://jsfiddle.net/LLhFc/