JavaScript EditorDebugger script     Dhtml css 

Team LiB
Previous Section Next Section

Controlling Fonts

The FONT element is deprecated in HTML 4 in favor of using styles to achieve similar or superior results. Using styles, you can specify an unlimited range of font sizes, and you can also specify element backgrounds (colors and/or images), neither of which can be done using the FONT element. The following sections guide in using styles in place of the FONT element.

Controlling Font Colors

In CSS, the color property is used to set the foreground color for elements. A foreground color can be set using any of the 16 standard color names (black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, or yellow) or an RGB hex code (#ff6600;, for instance).

You've already added a style rule that uses one of the 16 standard color names (blue) to apply a color to the H1 element (see Figure 8.1). Since there isn't an orange color among the 16 standard color names, use an RGB hex code to specify that the H2 element should be displayed in an orange color (see Figure 8.2):

<style type="text/css">
h1 { color: blue; }
h2 { color: #ff6600; }
Click To expand
Figure 8.2: A style uses an RGB hex code (#ff6600) to cause all H2 elements to be colored orange.

Setting a Transparent Background Color

Unlike with the FONT element, styles allow you to also set a background color for an element. When setting a foreground color for an element, it is recommended that you also always either specify a background color or declare that the background is transparent. That is because users can also create their own style sheets and may set a background color for an element if you don't. Thus, if you set a blue foreground color for an element, but not a background color, you could end up displaying your blue foreground color against a user's blue background color. Set the backgrounds of the H1 and H2 elements to be transparent:

<style type="text/css">
h1 { color: blue; background: transparent; }
h2 { color: #ff6600; background: transparent; }

Later in this session, in "Controlling Margins, Padding, and Borders," you will work with examples of setting a specific background color for an element.

Controlling Font Sizes

The FONT element's SIZE attribute lets you specify seven different font sizes. Styles give you much more versatility in setting the font size of an element, in that you can set any size using a variety of different ways. Of these, the two most common ways to set font sizes using styles is by using pixel measurements and em measurements.

Setting Font Sizes Using Pixels

The word pixel stands for picture element. An 800-Ч-600-pixel screen resolution, for instance, means that the screen display is composed of 800 Ч 600 (or 480,000) picture elements. Using styles, you can set the font size (or height) of an element to any pixel size. Set the H1 element to a size of 42 pixels (see Figure 8.3):

h1 { color: blue; background: transparent; font-size: 42px; }
Click To expand
Figure 8.3: The H1 element is set to a size of 42 pixels.

Setting Font Sizes Using Ems

While pixel measurements are relative to the screen resolution, em measurements set font sizes relative to the parent element's font size. This allows you to set a font size that will scale up or down with the base font size, for instance. Set the H2 element to a size of two ems (see Figure 8.4):

h2 { color: #ff6600; background: transparent; font-size: 2em; }
Click To expand
Figure 8.4: The H2 element is set to a size of two ems.

In this case, the element's font size is set to two times the default base font size, since it is nested directly inside of the BODY element. If an H2 element were nested inside of another element (a DIV element, for instance), its size would then be scaled relative to that element's font size (the parent element's font size).

Pixels or Ems—Which to Use?

It would be nice if the decision to use pixels or ems in setting font sizes was a simple and straightforward one. It isn't, however.

Using ems to set font measurements would be the preferred alternative, in that they allow authors to set font sizes that scale relative to a user's own font-size preferences, whereas setting font sizes in pixels imposes the author's choice on the user. A user with a visual disability, for instance, might want to increase their default font size to three or four times the default size, either in a browser's preferences or in a user-defined style sheet. Current browsers do allow users to zoom text displayed in their pages, however.

The primary disadvantage of using em measurements in page designs is that some earlier browsers have problems with them. Internet Explorer 3 has a flawed implementation of CSS that causes a measurement of one em to be equivalent to one pixel. Some versions of the Netscape 4 browser cause nested elements to inherit the actual value, rather than the computed value, of a font-size setting, which can cause nested elements to seemingly inexplicably increase in size. While relatively few users are using these browsers, you don't want to block them from accessing your page's content. Later in this session, in "Ensuring Backward and Forward Compatibility," you will learn some methods and techniques you can use to shield or alert users of Internet Explorer 3 or Netscape 4.

Using pixels to set font measurements, Web designers can make sure font sizes are scaled relative to the images in their page. This kind of page design is often referred to as a pixel-perfect design. This allows designers to create a page that has a very specific look. Designers often defend creating these kinds of page designs on the grounds that clients demand and are unwilling to pay for page designs that do not reproduce a specific look at differing screen resolutions.

So, there is really no cut-and-dried answer to the question of whether ems or pixels should be used to set font sizes. Ems are preferable, but present more compatibility issues and may run counter to client wishes. Pixels are more predictable, but may force users to accept author choices that run counter to their wishes. You need to decide whether to use ems or pixels on a case by case basis, in other words.

A third alternative does exist, however, which is to not set font sizes at all, allowing the browser or a user to specify font sizes. At minimum, even when using ems, you should avoid setting a font size for the BODY element, since doing so can interfere with font-size settings for the BODY element in a user-defined style sheet. By setting font sizes using ems for elements nested inside of the BODY element, font sizes using ems will scale gracefully relative to a user's own preferred default font size.

When setting font measurements, you need to be aware that Windows and the Macintosh platform default to displaying fonts at different dot-pitches (or dots-per-inch, or dpi). Windows defaults to displaying fonts at 96 dpi, whereas the Macintosh defaults to displaying fonts at 72 dpi. This has the effect of causing the default font size to look smaller on a Macintosh than on a Windows system, even if the monitor sizes and screen resolutions are the same. Windows users can change the default dot-pitch for fonts on their systems by clicking the Advanced button in the Display Properties control panel. Many Macintosh browsers have toolbar buttons that can be clicked to increase or decrease the default font size used to display Web pages. Internet Explorer 5 for the Macintosh actually displays fonts using the Windows dot-pitch (96 dpi), but other Macintosh browsers do not.

Using Other Measuring Units

There are other measuring units, besides pixels and ems, that can be used when setting font sizes. These include: percentages (%), ex-heights (ex), points (pt), picas (pc), inches (in), centimeters (cm), and millimeters (mm). For setting font sizes, percentages work identically to using ems, with a value of 110% being equivalent to 1.1em. Ex-height measurements theoretically should allow setting a font size based on a font's ex-height (the height of a lowercase x). In practice, however, all browsers treat an ex as being exactly half an em, regardless of whether a particular font's exheight is actually half of its height (which in many cases is not the case).


Points, picas, inches, and centimeters should never be used when setting font sizes, because they are absolute font sizes that have no meaning since the dimensions of the target media (a Web page) are unknown. They should only be used when creating a style sheet that will only be used when printing a page (by inserting a media="print" attribute in the STYLE element), since the size of the target media (an 8-by-11-inch piece of paper) is known.

There are also a number of additional keywords that can be used to set font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, larger, and smaller. Because of inconsistency in how current browsers implement these keywords, however, you should avoid using them.


If you only need to bump the size of a text string up or down a step, then the BIG and SMALL elements have not been deprecated and can be freely used in an HTML document declared to be compliant with the strict definition of HTML 4.01.

Controlling Font Faces

The FONT element's FACE attribute lets you specify a font face or list of font faces to be used when displaying an element. The font-family property lets you do the same thing using styles. Specify a list of fonts, starting with Arial, which can be applied to the H1 element (see Figure 8.5):

h1 { color: blue; background: transparent; font-size: 42px;
font-family: Arial, Geneva, Helvetica, sans-serif; }
Click To expand
Figure 8.5: A style causes the H1 element to be displayed using an Arial font.

Any font-family names that include spaces must be enclosed within double or single quotes. For instance:

font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;

Using the SPAN Element

Up until now, you have been setting font characteristics for elements. The FONT element, however, is an inline element that can be used to set font characteristics for text strings within an element. The SPAN element is an inline element that can be used in conjunction with styles to do the same thing. There are a couple of ways that you can do this: You can set the same properties for all instances of the SPAN element, or you can use the CLASS attribute with the SPAN element to create as many custom inline elements as you want.

Using a Generic SPAN Element

To apply style properties to all instances of the SPAN element, first bracket some text using the SPAN element:

<p><img src="goodegg.gif" width="400" height="267" alt="The
Good Egg Company banner image"></p>
<h1><span>Egg</span> Facts and Figures</h1>

Next, add a style rule to your style sheet that applies properties to the SPAN element (see Figure 8.6):

h2 { color: #ff6600; background: transparent; font-size: 2em; }
span { color: green; background: transparent; font-size:
1.3em; font-family: "Comic Sans MS", Geneva, sans-serif; }
Click To expand
Figure 8.6: Style properties are set for the SPAN element.

Assigning a Class Selector with the SPAN Element

You can also create styles that are only applied to SPAN elements that belong to a specific class. For instance, add a CLASS attribute to the SPAN element that you added earlier:

<h1><span class="first">Egg</span> Facts and Figures</h1>

Next, edit the style rule you created earlier for the SPAN element so it uses a class selector, by appending the class name following a period:

span.first { color: green; background: transparent; font-size:
1.3em; font-family: "Comic Sans MS", Geneva, sans-serif; }

Now, the style properties will only be applied to SPAN elements that contain a class="first" attribute. You can now create as many more additional custom SPAN elements as you like, simply by adding a CLASS attribute (class="second", class="third", and so on) and referencing it using a class selector (span.second, span.third, and so on).

Setting Text, Link, and Background Colors for the Document

The BODY element's TEXT, LINK, VLINK, ALINK, BGCOLOR, and BACKGROUND attributes (for setting text and link colors and background colors and images) are also deprecated in HTML 4. You can control all of these document characteristics using styles alone. To substitute for the TEXT and BGCOLOR attributes, just set foreground and background colors for the BODY element. To substitute for the LINK, VLINK, and ALINK attributes, use a:link, a:visited, and a:active as the selectors, which are special pseudo-classes defined in CSS just for this purpose. In addition, CSS lets you set a hover color for a link using styles, by using the a:hover pseudo-class, which will be displayed when the mouse is hovering over the link.

Add the following to your style sheet to set the text, link, and background colors for your document (see Figure 8.7):

<style type="text/css">
body { color: navy; background: #ffffcc; }
a:link { color: #006699; background: transparent;
font-weight: bold; }
a:visited { color: #006699; background: transparent;
font-weight: bold; }
a:hover { color: red; background: yellow; font-weight: bold; }
a:active { color: purple; background: transparent;
font-weight: bold; }
h1 { color: blue; background: transparent; font-size: 42px;
font-family: Arial, Geneva, Helvetica, sans-serif; }
Click To expand
Figure 8.7: Text, link, and background colors are set for the document, using styles alone.

Notice that the same color was set for both unvisited links (a:link) and visited links (a:visited). That was because Internet Explorer defaults to displaying internal links, even if they haven't been clicked on, as visited links, whereas other browsers display them as unvisited links. The a:active and a:hover pseudo-classes are listed after the other anchor pseudo-classes. If they are listed before any of the other anchor pseudo-classes, they won't be displayed. Notice also that a:active follows a:hover; if they are inserted the other way around, with a:hover following a:active, the properties assigned to a:active won't be displayed (which may be how you want it, however).

A new style property, the font-weight property, is used to set the weight of the links' text to bold. That can help a colored link stand out more clearly against a colored background.

Setting a Background Image

You can use styles to set a background image to be displayed behind the document body (or behind any other element). Set a background image to be displayed for the BODY element (see Figure 8.8):

body { color: navy; background: #ffffcc url(b_whitesand.gif); }
Click To expand
Figure 8.8: A style is used to display a background image behind the document body.

Notice that the background image declaration is added onto the color declaration of the background property. That is because the background property is actually a shortcut for setting a number of other properties, including the background-color, background-image, background-repeat, background-attachment, and background-position properties. Because some earlier browsers that recognize CSS do not recognize the background-color or background-image properties, it is a good idea to stick to using the background property to set both background colors and background images. For information about using the other background properties, see Appendix A, "HTML/XHTML Reference."

Team LiB
Previous Section Next Section

JavaScript EditorDebugger script     Dhtml css