CODEWITHSUNDEEP
csshtml
user2878889
user2878889

Reputation: 31

H1 text with a span size issue

I only know the basics of html and css. I'm trying to get my H1 with a span inside to display smaller than the h1 size

<h1>title<br><span>title 2</span><h1>

and then css

h1 {
font-size: font-size: 4.4em;
}

span {
display: block;
font-size : 1.4em;
}

but it still comes up the same size as the h1 please help!

Upvotes: 2

Views: 2894

Answers (5)

Ishan Jain
Ishan Jain

Reputation: 8161

The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Means In your case, you set font-siz for span 1.4em, it's mean your font size:

Actual Font Size of Inner Element (span) is :-  (font-size of the document) * (font-size of Parent Container h1 ) * (font-size of inner element span)

Read this document

Try to set PX value  - http://jsfiddle.net/c7LG5/

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Because span is inside h1, it will inherit the font-size.

font-size of span will be 4.4em if you dont give any font-size explicitly.

You want font-size of span smaller, means font-size should be less than 1em. 1em means same font-size as of parent's.

In your example it is 1.4em means 1.4 times of 4.4em. Try:

span {
    display: block;
    font-size : 0.7em;
}

Fiddle here.

Upvotes: 2

Poornima
Poornima

Reputation: 928

'em' is a relative unit for font-size and 'px' is a fixed value. So when you set the font-size as 4.4em for H1, it multiplies the default font-size of browser with 4.4 and displays the text in that size. Your span is inside the H1. So essentially, your font size for the text in SPAN would be (default font-size * 4.4) * 1.4

Since the value is being multiplied by 1.4, you are not noticing the difference, but it is being applied. Try using a different value for SPAN font-size, like 2em and you will notice the difference.

And yes, as others pointed out, please correct the CSS syntax.

Upvotes: 2

saulotoledo
saulotoledo

Reputation: 1972

You have "font-size: font-size: " at your h1. Remove one:

h1 {
  font-size: 4.4em;
}

span {
  display: block;
  font-size : 1.4em;
}

Upvotes: 1

stanze
stanze

Reputation: 2480

Try this you entering wrong value to the css property

h1 {
font-size:4.4em;
}

Upvotes: 1

Related Questions