HTMLHelp Forums > font-size not working?

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

stub

May 3 2016, 01:11 AM

Here is my CSS

CODE

body {
    background-color: #7C7C7C;
    font-size: 20px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.navbar {
    background-color: #000;
}

h1 {
    font-size:24px;
    text-transform: uppercase;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #000;
    margin-top: 20px;
}

.footer {
    text-align: center;
    padding: 10px 10px 20px 10px;
    margin-top: 20px;
    background-color: #000;
    font-size: 16px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.footer p{
    margin: 0px;
}

This code is in the last of 3 CSS files to be loaded, and it is the only mention of .footer in this file. If I edit text-align:/padding:/margin-top:/background-color:/ they all change the screen as expected. But font-size: doesn't. I read somewhere that font-size: is picky and required the font-family: to be the last setting, so I added that. But still the font-size is not changing in the footer. So maybe this font-size: is still being more picky than the rest. How to write the .footer so font:size: will be recognized?

stub

May 3 2016, 01:24 AM

OK. Problem solved. Putting font-site and font-family into .footer p{ solved the problem. Gee. I've been puzzling that one for days

Frederiek

May 3 2016, 02:34 AM

You don't have to repeat the same font-family for every element you want to use it for. Since BODY has it, the rest will pick that up.

When using different font-sizes for different elements, you do need to specify them.

Maybe you encountered a specificity (cascading) problem. Search for "css specificity" to learn more about it.

pandy

May 3 2016, 09:53 AM

QUOTE(stub @ May 3 2016, 08:11 AM)

I read somewhere that font-size: is picky and required the font-family: to be the last setting, so I added that.

Not true. I think what you read was about the shorthand propery 'font' that can be used to set all the font properties in one fell swoop. With that the values for font-size and font-family are required while the rest are optional.

So

CODE

font: 16px

would be no good and you would need to use this.

CODE

font: 16 px 'Helvetica Neue', Helvetica, Arial, sans-serif

One you write out the single properties there are no such requirements. I'm with Frederiek. Something else in your CSS is messing with the font size for the footer text.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.