Question

I know that I can change the size of individual html headings using css (e.g., h1 {font-size: 0.5em;}). However I would like to overall reduce the size of all the headings (h1, h2, h3, etc…) while retaining their relative sizes to each other (h1 > h2 > h3, etc…).

Is it possible change all the heading sizes with a single css statement or will I have to specify each heading separately?

Answer 1

You cannot set e.g. the font size of h1 and h2 in the same CSS statement, except to the same declared value.

However, if you wish to make it possible to change the font sizes of headings in a centralized manner, you can wrap all headings in div elements, e.g.

<div class=heading><h1>...</h1></div>
<div class=heading><h2>...</h2></div>

Now, assuming you have set font sizes in em units (or percentages), e.g. h1 { font-size: 2em } h2 { font-size: 1.5em }, you can modify them all by setting font size on the enclosing div element, e.g.

.heading { font-size: 0.9em; }

This would reduce the font size of all headings by 10%, without affecting font sizes on the page otherwise.

P.S. It is odd to set the font size of the main heading to one half of the font size of its parent. It is difficult to see what you are trying to accomplish. It is normally sufficient to set font sizes in em units using some reasonable scale.