Search code examples
htmlcssfont-family

Why does em override p for font-family?


Consider the following CSS:

* {  font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif}

p {  font-family: Courier; }

And then this markup:

<p>Hi there. So <em>very</em> pleased to make your acquaintance.</p>

Why does the <em> display in Gill Sans? Or rather, why does the wildcard override the <p>. I guess I can see -some- logic in this if every tag has the same 'weight', but it still seems like a 'bug' to me intuitively... and it tends to make for more markup for me in that I can't assume that <em> will -only- affect the font-style in a particular way.

In short, is there a way to have 'modifiers' like <em> only operate on specific features?


Solution

  • * matches every element, including the <em> inside the <p>.
    The <em> would have inherited the font from the <p>, but the * overrides it.

    You should almost never use *.
    If you want to apply a global font, set it to body, so that other rules can override it for specific elements and cascade to their descendants.