Font inheritance

I think my cascade is broken, but I doubt it

[Dabrowski]

ok, before I posted this I did a little test page for my problem. The damn thing worked. So I think I know what my problem is, but I don't understand why.

ok, the code......

* { font-family: "Verdana", sans-serif; }

#mainwrapper .pagewrapper { font-family: "Georgia", serif; }

<div id='mainwrapper'>
...<div id='home' class='pagewrapper'>
......<p>Text</p>

Now, guess what font the "Text" is in? Verdana. Now I thought that as I had specified "Georgia" on it's parent, this was supposed to cascade below it?

Do some things cascade and some not?

[Setek]

Now, guess what font the "Text" is in? Verdana. Now I thought that as I had specified "Georgia" on it's parent, this was supposed to cascade below it?

Do some things cascade and some not?

Yes, actually, some things do inherit and some things don’t, however, font properties aren’t part of that group.

The reason why the text in Verdana is because you’re stopping the inheritance of font properties by explicitly setting every element to Verdana, so you’ll notice if you remove the text out of the paragraph, so it just sits within

.pagewrapper

, it will be in Georgia—but as soon as you wrap any element around some text, it will revert to Verdana.

What’s weird though is not that it’s a cascading problem, but that, due to higher specificity, it’s not being overruled by the second rule… I never really understood why, but I had the same problem a long time ago.

So, what do I do about it?

Rather than use the Universal selector, it’s better to use

body

for your font property. Only use the Universal selector for things you really want to set on everything, like

margin: 0;

and

padding: 0;

(and some also do

border: 0;

)

[Robin_reala]

Any selector beats relying on inheritance - like Setek says this is because you’re directly applying Verdana to your <p> (with the * selector) which beats the expected result of inheritance of Georgia from the parent.

[Dabrowski]

I see, I assumed the * selector would have the lowest priority, so you could specify a default but override it anywhere in the cascade.

Thanks for setting me straight.

I do use:

* { margin: 0; padding: 0; }

I used to use

'border: 0;'

too but it only really applies to

<a><img></a>

combinations.

I stopped using it in favour of

IMG { border: 0; }

after I spent an hour trying to figure out why my <input> fields weren't displaying! ;)

[Robin_reala]

Which is why I don't hold with reset styles :)