Why does my h1 element not inherit the font-size?

I am currently on:

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-web-development-fundamentals/modules/fecp-developing-with-css/projects/dasmoto

I tried styling the top Header in two different ways:

<header>
        <h1>Dasmoto's Arts & Crafts</h1>
</header>

First try:

header {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("./images/pattern.jpeg");
}

Second:

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("./images/pattern.jpeg");
}

The first variation gives a much bigger font size for the h1 header than the second. Why is this the case? Shouldn’t the nested h1 inside header inherit the font-size property of the header?

It does, but as BASE SIZE, which when the default 2em of the H1 is applied makes it 200px.

1 Like

Ahhhh, so h1 etc. depend on the Base font size and scale from there. Sounds logical somehow. Thank you very much!

1 Like

We don’t see this discussed, but it is always a good idea to adopt the USER settings for font size, and scale from there.

body {
    font-size: 100%;
}

If the user has their system font-size set to 24px, then that will be the base size for the page presented to them. We shouldn’t override a user’s system settings.