ptg16476052Fonts and Font Sizes 1437
▼
You can also use CSS to specify font size. CSS provides a lot of flexibility and power
when it comes to specifying how large things are. You can specify sizes in a variety of
units. I’ll dig deep into how sizes work in CSS in Lesson 8, “Using CSS to Style a Site,”
but I’ll provide a preview here. Let’s start with the basics. To change the font size for
some text, the font-size property is used. The value is a size (relative or absolute) in
any of the units of measure supported by CSS.
The simplest is the percentage size, relative to the current font size. So, to make the font
twice as large as the size inherited from the enclosing element, just use the following:
This text is normal sized, and this text is
twice that size.
You can also specify the size in any of a number of units. For example, the px unit speci-
fies the height in pixels. To set your text to be 12 pixels high, the following style declara-
tion is used:
This text is 12 pixels tall.
One thing to watch out for: When you specify units in CSS, you
must leave no spaces between the number of units and unit
specification. In other words, 12px and 100% are valid, and 12 px
and 100 % aren’t.CAUTIONDO list backup fonts when specifying
a font family in order to make it more
likely that your users will have one of
the fonts you specify.DON’T use too many different fonts on
the same page.
DON’T use absolute font sizes with
CSS if you can help it, because some
browsers won’t let users alter the text
size if you do so.DO DON’T
Exercise 7.1: Creating a Real HTML Page
Here’s your chance to apply what you’ve learned and create a real web page. No more
disjointed or overly silly examples. The web page you’ll create in this section is a real
one, suitable for use in the real world (or the real world of the web, at least). ▼