CSS: font-family in body doesn't apply to content

html css font-family

12,101

Isn't the CSS above should be something like this?

body{
    font-family: 'Crimson Text';
    font-size: 15px;
    margin: 0px;
}

.banner {
    otherstuff
}

12,101

Author by

Ken W

Updated on August 31, 2022

Comments

Ken W over 1 year

I'm using google font api, this code works when I move the font-family line into encapsulated classes and ids, Why is it that I have to move my font-family line into .banner for it to affect text inside my banner class

css:

body{
    font-family: 'Crimson Text';
    font-size: 15px;
    margin: 0px;


    .banner {
        otherstuff
    }

}

html.erb:

<div class="banner">
    <%= image_tag("logo.png")%>
    <div class="login_menu_bar">
        <label>login</label>
        <label>password</label>
        </br>
        yeah
    </div>
</div>

Ken W almost 12 years

didn't make a difference to what I can see, shouldn't the font-family specified in body apply to all child elements inside the <body>?
Edwin Bautista almost 12 years

It does, your syntax is just wrong. There is no such thing as nested curly braces in CSS. Body refers to the whole page excluding the header. So it need not to be explicitly declared on sub elements styles.
Ken W almost 12 years

thanks, didn't know that, but there's something funky going on here. I'll work it out.