Alexander Fidel Chen Alexander Fidel Chen - 14 days ago 5
CSS Question

<h1> is not inheriting font-weight from its container

I have a problem with inheritance in

CSS
. I made a
div
container put an
h1
element within it as such:

<body>
<div class="container">
<h1> test </h1>
</div>
</body>


From what I understand, all text within the
h1
element is bold and has a font-weight of 2em. To counteract this, I placed the following
CSS
properties on the container.

.container{
font-size:5em;
font-weight:normal;
}


h1
seems to inherit both properties and
h1
's
font-size
changes to
5em
as expected. But
<h1>
's font-weight stays bold, even though it inherited
font-weight:normal;
from its parent element. Here's what I see on my screen.

Font-Weight Problem

Why does the
h1
's font-weight not change to
font-weight:normal;
? I'm think its because there are certain CSS properties, like font-weight, that a child element does not inherit from its parent.



.container{
font-size:5em;
font-weight:normal;
}

<body>
<div class="container">
<h1> test </h1>
</div>
</body>




Answer

.container {
  font-size: 8px;
}
<div class="container">
    I'm 8px text
    <h1>This is H1 in 16px font-size (8px * 2em = 16px)</h1>
</div>

h1 neither inherits font-size nor font-weight because inheritance only applies to properties not defined otherwise.

What you are seeing is 2em based on 5em (equally large as 10em if container had font-size: 1em;).

Both font-size and font-weight have other property values defined in the user agent stylesheet as your dev tools are showing you.