font size

[Count_Rugen]

Hi,
this should be an easy one, but im new to all this, so please bear with me. I have set my styles as such:

p {font: normal 10px "Verdana", "Arial", "Sans-Serif"}
p.large {font: bold 14px; color:#FFFFFF}

Using <P>, everything works fine, but using <P class=large> in netscape 7, the text is neither large, or bold. Both work fine in IE5.

Can you please highlight what im doing wrong here.
thanks
Count Rugen

[AdamGundry]

I think it's to do with your use of the "font" shorthand selector. Your code doesn't work in Mozilla 1.3 either, but this does:

p {font-size: 10px; font-family: "Verdana", "Arial", "Sans-Serif";}
p.large {font-size: 14px; font-weight: bold; color: #FFFFFF;}

Adam

P.S. You really should use relative units for font sizes, not px.

[jeffmott]

p.large {font: bold 14px; color:#FFFFFF}For the font property, the only required properties are font-size and font-family. Your style definition above is missing the font-family. This is why the property is ignored in Mozilla and is also ignored in IE when in standards compliant mode.

[AdamGundry]

jeffmott, you are probably right but (forgive my incomplete understand of CSS) wouldn't the font-family setting of p cascade to p.large automatically?

Adam

[jeffmott]

wouldn't the font-family setting of p cascade to p.large automaticallyIf you don't set it to something different then yes. For instance from you example, setting the individual properties allowed you to omit the font-family, in which case it would inherit. But the definition of the font shorthand property requires at least a font-size and font-family. So in the case of using the shorthand they both must be set explicitly. Using the individual properties is the best way to go as you already showed in your earlier post.

[Count_Rugen]

Thanks for that. Now, you said to use relative units for font sizes, not px, but i was recommended to use px. i guess i didnt ask him why, i just did it. So why relative sizes?

[AdamGundry]

It's mainly to do with accessibility. See this article:
http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html

Adam