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; }
</style>

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

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; }

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; }

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).

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.

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; }

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).