skunkbear
Span and font-size

We can easily write text in a webpage between the body tags and put them on new lines using a break tag, but the text has stayed the same size. Sometimes you may want smaller or larger text. We can change the text size of the whole webpage by adding some style into the body tag like we did with a background color. Instead of using background-color though, you use font-size like so:
That code says that, for all the text in the body section, you want the font size to be 200 percent bigger than the default. The default that web browsers set text to is 16 pixels. A pixel is one of those little dots on your screen. So if you stack 16 dots up then your text is 16 pixels high. That height of 16 pixels also goes by another name, an "em". In the code above, we told it to be twice as big, so 32 pixels high, or 2 ems. You can use percentages, pixels, or ems to set your text size.

Sometimes you just want to change the text size of one word or one line of text. Maybe you'd even say a "span" of text. Luckily, there is two tags we can put around text that we can attach a style to. They are span tags: <span> text goes here </span>. That's how a normal span is written. Without adding any style, it wouldn't change the text in anyway. Spans don't change anything, they are just an empty container to put things in and add style to. You can add a style in the same way that we did in a body tag like in this code:
Inside the first span tag we put the code: style="font-size:70%". That sets the code to be 70% the size of the default size. After writing "Little crazy world" We used the ending span tag that has a backslash "/" in it. This indicates that the span tag is over and to stop making code 70% smaller. Then we added a break tag so that the next text will be on a new line. That text we set with pixels. Twenty pixels should be a little bigger than the original line that says "Hello Crazy World!". The last span is set using "2em". That makes it show up at 2 times the default of 16px which is 32pixels.

If you want to have some real fun, you can even use background-color again in the span instead of the body. Just make sure you separate the font-size property from the background-color property using a semi-colon ";". Check this out:


submit to reddit

More: CSSHTMLfont-sizeempixel

Source: Seth | 2012-05-14

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag