CODEWITHSUNDEEP
cssfont-size
Zohar Chiprut
Zohar Chiprut

Reputation: 908

font-style as a base styling also for child elements using % or em

How can I declare in CSS font-style as a base styling also for child elements using star item, while not using fixed "px" values, only "em" or "%"?

The only thing I thought of is:

* {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-size: 150%;
  box-sizing: border-box;
}

table, tbody, form, tr, td  {
  font-size: inherit;
}

Is there a better approach?

Note: declaring the first font-size in order to rely proportionally on the browser's default font sizing. It works fine for all fonts excepts those are under child elements (such as td).

td font size is 150%, then tr font size that is 150%, then its parent tbody that is 150% from its parent table that — if directly bound to the body — gets the 150% as declared from the beginning (150% from browser defalut).

In order to fix that the last child gets the same font-size, I used font-size: inherit;

Upvotes: 2

Views: 372

Answers (2)

Cameron
Cameron

Reputation: 1067

You typed inherit wrong:

table, tbody, form, tr ,td,  {
  font-size: inhereat;
}

Do this:

table, tbody, form, tr ,td,  {
  font-size: inherit;
}

But also you don't need the above code because you had the font-size for * be something which means everything (*) will have the font-size. So you don't need to say to inherit the font-size of itself.

* {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 150%;
  box-sizing: border-box;
}
<p>Hello world!</p>

Upvotes: 1

Tom
Tom

Reputation: 13

Why not just setting the font-size on the body element? All children will inherit unless having their own styling.

body {
  font-family: sans-serif;
  font-size: 150%;
}
<p>Hello</p>
<table>
  <tr>
    <td>
      1
    </td>
    <td>
      2
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions