Question

This should be a simple solution, but I can’t seem to figure it out. Take a look at the fiddle. Why can’t I override the font-size of the second span? Here is the code:

html:

<h1>
    <span>hello </span>
    <span id="span2">world</span>
</h1>

css:

h1
{
    font-size:2em;
}
h1  #span2
{
    font-size:1em !important;
}

Answer 1

Because you set the font-size of <h1> to 2em. the span inside of your <h1> is 1 em that means something like 100% of the inherited font-size. see what happens if you set the font-size of span2 to 0.5em
and btw, your first span is missing a proper ending tag.