Question 190806 in Html Question posted in
Some basic documentation can be found here.

Html – how to change only size of normal text, not headers with EM

I’m making a website and I’m using em for font size, but in body, font-size: 1.2em; changes the size of my headers too. how can I stop this?

I tried

h1, h2, h3 {
    font-size: inherit;
}

but that brings them to the size of the normal text.

Tags:

2

Answers


  1. 0

    To change only the size of normal text, not headers, with EM, you can use the following CSS:

    p {
  font-size: 1.5em;
}

    This will set the font size of all paragraphs to 1.5 times the default font size. You can change the value of 1.5 to any size you want.

    To make sure that the font size of the headers is not affected, you can use the following CSS:

    h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}
    Login or Signup to reply.
  2. 0

    Try using the :not() pseudo-class. Can I use :not()? shows 93.74% browser support.

    body :not(h1, h2, h3, p.default) {font-size: 1.2em}
    <h1>Primary heading</h1>
<p>The default text size is 16 pixels</p>

<h2>Secondary heading</h2>
<p>With a 1.2 multiplier, this text is expected to be 19.2px (unless the browser default settings have been modified or zoom is applied.)<p>

<h3>Tertiery heading</h3>
<p>With the default settings, `h1` is 2em (32px), `h2` is 1.5em (24px) and `h3` is 1.17em (18.72px).</p>

<p class="default">This text inside `p.default` is the default size</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search