CODEWITHSUNDEEP
htmlcss
Nick Rolando
Nick Rolando

Reputation: 26167

Override span style within styled header

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;
}

Upvotes: 0

Views: 1643

Answers (4)

chipcullen
chipcullen

Reputation: 6960

em's are relative units of measurement. You could almost substitute "%" instead of "em". So, when your span rule has "1em", it's interpreted as "make me 100% the size of my parent", thus, no effect.

If you want it to be half the h1 size, you need:

#span2 {
   font-size: .5em;
}

See this updated fiddle.

Upvotes: 0

j5Dev
j5Dev

Reputation: 2042

Try This

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

Upvotes: 0

malifa
malifa

Reputation: 8165

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.

Upvotes: 4

maximus ツ
maximus ツ

Reputation: 8065

add 

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

Upvotes: 1

Related Questions