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.
Search WWH ::

Custom Search