CODEWITHSUNDEEP
htmlcsssassfont-size
Sarah_A
Sarah_A

Reputation: 158

<body> font size doesn't affect <h> tags

I'm trying to double my font size on every page of my HTML project. I did this:

body{
  font-size:200% !important;
}

on the main css file which is included in every single page, and the result was good on every tag except <h1> to <h6> . They remained as the way they were before. I tried the same trick for these tags, 

h1, h2, h3, h4, h5, h6{
  font-size:200% !important;
}

which resulted in extra large font for these tags. In my inspect element window, I can see that these tags had been over written before I did this to them, and their font-size was changed. my font-size:200% !importantremoved their previous font-size and now they have their standard font-size *2.

I need to keep that modified font-size for <h1> to <h6>, and just make it double. Doing it by changing font-size for every single one of them would be inefficient. Is there anyway to force them to obey <body> font-size rule?

Edit: I also realized there are some other classes which haven't been affected by my rule to body tag. As an instance, divs with ionic form-message class. Now this is getting weird. :|

Upvotes: 4

Views: 3767

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

From the MDN: these elements have a rank given by the number in their name

That means you cannot use always 200% for each element, but a different value like in:

h1 { font-size: 400%;}  /* The chrome def value: 2em */
h2 { font-size: 300%;}  /* The chrome def value: 1.5em */
h3 { font-size: 234%;}  /* The chrome def value: 1.17em */
h4 { font-size: 200%;}  /* The chrome def value: 1em */
h5 { font-size: 166%;}  /* The chrome def value: 0.83em */
h6 { font-size: 134%;}  /* The chrome def value: 0.67em */
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

Upvotes: 0

user663031
user663031

Reputation:

In Chrome at least, the font size for h1 etc. is defined as 2em. Therefore, it will be a multiple of whatever font size is in effect on an ancestor, including the body.

<div style="font-size: 200%; ">
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <p>This is p.</p>
</div>

2em for h1 is the suggested, recommended default setting, as per the W3C, so I would expect most if not all browsers to follow it.

If this doesn't work for some reason, you could try defining the size of h1 etc. using rem, which refers to the font size on the html element, but you would have to set them individually.

on the main css file which is included in every single page, and the result was good on every tag except <h1> to <h6>.

What browser was that? Some browsers might define the font size for h1 etc. in the user agent stylesheet not using em, but that would surprise me.

Upvotes: 2

Related Questions