HTML and CSS Reference
In-Depth Information
Adjusting font sizes
If you do thi ngs righ t, any
user w ill be a ble to i ncrease
the fo nt size s on yo ur web
page f or read ability . You'll
see ho w in a couple o f page s.
Now that Tony has a new set of fonts, we need to work on those font sizes, as most
people find the default sizes of the headings a bit large, at least aesthetically. To do
that, you need to know how to specify font sizes, and there are actually a few ways
to do this. Let's take a look at some ways to specify font-size, and then we'll talk
about how best to specify font size so they are consistent and user friendly.
You can specify your font size in pixels, just like the pixel dimensions you used
for images in Chapter 5. When you specify font size in pixels, you're telling
the browser how many pixels tall the letters should be.
In CSS , you sp ecify p ixels wi th
a numb er follo wed by “px”.
This sa ys that the fo nt-siz e
should be 14 p ixels h igh.
font-size: 14px;
The p x must come r ight af ter the numbe r of
pixels . You ca n't hav e a spa ce in be tween.
h i p
1 4 pixel s
He re's ho w you'd specif y
fon t-size withi n a bod y rule .
body {
font-size: 14px;
Unlike pixels, which tell the font exactly how big it should be in pixels, a font size specified
as a percentage tells the font how big it should be relative to another font size. So,
font-size: 150%;
says that the font size should be 150%
of another font size. But which other
font size? Well, since font-size is
a property that is inherited from the
parent element, when you specify a
percentage font size, it is relative to
the parent element. Let's check out
how that works…
body {
font-size: 14px;
h1 {
font-size: 150%;
Search WWH ::

Custom Search