Taking Your Talent to the Web

263

browser companies have increasingly supported CSS in earnest. Eventually, web designers will be able to dispense with HTML tables and other forms of HTML abuse altogether and use CSS to design robust sites that conserve bandwidth while offering true separation of style from content.

In turn, this separation of style from content will enable designers, programmers, and web technicians to more capably use additional web standards, such as JavaScript and the Document Object Model (DOM), to build truly dynamic, interactive sites.

WORKING WITH STYLE SHEETS

Style sheets are composed of “rules.” Rules have two parts: a selector that is followed by a declaration. Consider the style sheet below:

BODY {background: white; font-family: helvetica, arial, sans-serif;}

H1 {font-weight: bold; font-size: 24px; }

P, LI {font-size: 12px; line-height: 150%;}

BODY is the first selector, while the text within brackets is the declaration. Each declaration consists of one or more properties, followed by its associated values. For example, in the first line, background is a property, and white is declared as its value. font-family is a property, and the fonts listed are possible values for that property. This terminology is confusing at first, but working with style sheets is actually very easy. Let’s look more closely at the following example:

BODY {margin-top: 0; background: white; font-family: helvetica, arial, sans-serif;}

H1 {font-weight: bold; font-size: 24px; }

P, LI {font-size: 12px; line-height: 150%;}

The first line indicates that the BODY of the HTML document will use a white background and that typography throughout the entire page (unless otherwise noted via an additional selector) will be in the Helvetica family. If the user does not have Helvetica on his or her system, the type will be displayed in Arial. If Arial is not available, a generic sans serif will be used. Finally, margin-top: 0 tells the browser to start the web page at the top of the browser window, rather than “helpfully” offsetting it with an unpredictable or inconsistent vertical margin.

264 HOW: Style Sheets for Designers: Working with Style Sheets

Font families are displayed in the order with which they are written. If the user has both Arial and Helvetica on her system, Helvetica will be displayed because it is listed first. In this way it is possible for designers to specify

“best-case” scenarios while providing backup options. Remember: The first font listed will be displayed if it is available. The old <FONT> tag worked the same way.

It is crucial to provide typographic alternatives to compensate for crossplatform differences and to end every font declaration with a generic alternative, such as “serif” or “sans serif.” Additional generic alternatives include “monospace” for monospaced fonts such as Courier and “fantasy” for ugly and cancerous fonts such as Microsoft Comic Sans.

Recognize the awesome power of style sheets. In a single line, the typeface has been provided for an entire site. Imagine typing all those <FONT FACE=”HELVETICA, ARIAL, SANS-SERIF”> tags instead. Yuck.

BODY {margin-top: 0; background: white; font-family: helvetica, arial, sans-serif;}

Note also that the background color has been written out as “white.” Any color may be used, though as has been discussed before, it is always best to use web-safe colors.

Colors need not and usually should not be specified by name because names do not necessarily trigger web-safe colors. Instead of white, the designer could have specified the hexadecimal code for that color: #ffffff. It is even possible to use “shorthand” and specify only the first letter of each hexadecimal pair (#fff). This will be clearer with a color such as #ff9900, which can be written as #f90 in the style sheet, saving the designer three strokes of the keyboard and saving the user an infinitesimal amount of bandwidth.

Note that the H1 (headline), P (paragraph), and LI (list item) have had their sizes specified in pixels:

H1 {font-weight: bold; font-size: 24px; }

P, LI {font-size: 12px; line-height: 150%;}

Taking Your Talent to the Web

265

It is possible (though not always useful) to specify a size of 1px or 200px (or even larger type). Besides pixels, style sheets can use points, inches, centimeters, .ems, percentages (“font-size: 75%;”) and even absolute font size keywords. We will discuss the advantages and disadvantages of each further on in the chapter. Oh, brother, will we discuss them.

Note also that it is possible to specify bold (or light, or italic, or italic bold) and that for the first time in web design history, it is also possible to create Quark-like leading in HTML text. Okay, you’re new to web design, so you’re not impressed. We’ve had leading in desktop publishing tools since Nixon wore short pants—but not on the Web, sister. On the Web, this is some cool new stuff.

line-height: 150%

This declaration means that the text will have leading of 150%. Any number may be chosen. Line-height can be 110%, 200%, or 75% (for special effects involving overlapping text). Assume 100% as a default, which need not be written. (Actually, the built-in leading seems to be closer to 110%, but again, unless you are specifying leading for a reason, leave it out to avoid creating problems.)

Line-height, like font-size, can be specified in points, pixels, .ems, percentages, centimeters, or inches.

line-height: 18px;

Because 150% of 12px equals 18px (12 + 6 = 18), a line-height of 18px would look exactly the same as a line-height of 150% on 12px type. If the font-size were 24px, then 150% would yield a line-height of (24 + 12) 36 pixels.

It is also possible and often desirable to indicate font-size and line-height in the same declaration, using CSS shorthand:

P, LI {font: 12px/18px;}

The first number (12px) is the font-size; the second (18px) is the lineheight. All CSS-capable browsers understand this shorthand.