CODEWITHSUNDEEP
htmlcss
DQdlM
DQdlM

Reputation: 10244

Is it possible to alter the size of all html headings with a single css statement while still maintaining their relative sizes to each other?

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?

Upvotes: 4

Views: 3516

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

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.

Upvotes: 1

ferne97
ferne97

Reputation: 1073

You can change the font-size on a parent element like the body. If you are using ems or rems then they will scale up or down.

body {
    font-size: 80%;
}

http://jsfiddle.net/ferne97/FXKvx/

I added a button that toggles a class of small to the body tag which will set the font-size to 80% when added.

Upvotes: 0

Michael Johnston
Michael Johnston

Reputation: 2382

I don't think this can be accomplished in CSS, but try SASS (http://sass-lang.com/) if you want to keep your code short.

Upvotes: 0

Related Questions