HTML and CSS Reference
In-Depth Information
Another unit of measurement widely used on the Web is the
pixel
, which represents a
single dot on the output device. The size or
resolution
of most output devices is typically
expressed in terms of pixels. Thus a 1280
¯
720 screen resolution on a computer moni-
tor is 1280 pixels wide by 720 pixels tall, for a total of 921,600 pixels or 0.92 mega-
pixels. A pixel is a relative unit because the actual rendered size depends on the
density
of the output device. A Windows PC, for example, has a density of 96 dpi (dots per inch),
while a Macintosh computer has a density of 72 dpi. Some mobile phones have densi-
ties as high as 200 or 300 dpi. The pixel measure is the most precise unit of measure and
gives designers the most control over the appearance of a page; however, pixels are not
scalable. This can pose a problem for visually impaired users who need larger fonts, or
for users of mobile devices with very dense screens.
Finally, you also can express font sizes using one of the following keywords:
xx-small
,
x-small
,
small
,
medium
,
large
,
x-large
,
xx-large
,
larger
, or
smaller
. The size corresponding to each of these keywords is determined by the
browser. Note that the
larger
and
smaller
keywords are relative sizes, making the font
size of the element one size larger or smaller than the surrounding text. For example, the
following set of styles causes the
body
text to be displayed in a small font, while
h2
text
is displayed in a font one size larger (medium):
body {font-size: small;}
h2 {font-size: larger;}
Tammy suggests that you set the size of the
h1
headings to 1.7em, making the head-
ings 70% larger than the default size of the body text in the document.
To set the font size of the
h1
headings:
◗
1.
Return to the
sa_styles.css
file in your text editor.
◗
2.
Add the following style to the style rule for
h1
headings in the
section
element
(see Figure 3-29):
font-size: 1.7em;
Figure 3-29
Setting the font size of h1 headings
◗
3.
Save your changes to the file and then reload the
home.htm
file in your Web
browser. Verify that the font size of the
h1
heading appears slightly smaller under
the revised style sheet.
