A Complete Guide to Web Design

400 Chapter 23 – Cascading Style Sheets

Properties

Web Design in a Nutshell, eMatter Edition

because current browsers are still struggling with bug-free and consistent support

of CSS1, these properties should be enough to give you a good start in working

with style sheets.

First, a disclaimer—the explanations provided here describe how each property

ought to work according to the specification. Most of these will work differently

on different browsers and many are not supported at all. For a listing of which

browsers support which properties, see the charts in Appendix E.

Type-Related Properties

Style sheets offer controls for type presentation similar to those found in desktop

publishing. The following group of properties affects the way type is displayed,

both in terms of font and text spacing.

font-family

Values:

family name,generic family name

Example:

P { font-family: "Trebuchet MS", Verdana, sans-serif }

Applies to:

All elements

Inherited:

Yes

You can specify any font (or list of fonts, separated by commas) in the font-

family property. Bear in mind, however, that the font needs to be present on

the user’s machine in order to display, so it is safest to stick with common

fonts.

You may (and it is advisable) include a generic font family as the last option

in your list so that if the specific fonts are not found, a font that matches the

general style of your choices will be substituted. The five possible values are:

• serif (e.g., Times)


• sans-serif (e.g., Helvetica or Arial)


• monospaced (e.g., Courier or New Courier)


• cursive (e.g., Zapf-Chancery)


• fantasy (e.g., Western, Impact, or some display-oriented font)
  Note that in the example, the first font is enclosed in quotes. Font names that
  contain character spaces must be enclosed in quotation marks (single or
  double). Generic family names must never be enclosed in quotation marks.