-->
Bookmark and Share

Using Style Sheets

Review the W3C CSS standard recommendation.

Values

Although properties vary in what values they accept, there are some common, distinct value types and some general rules for expressing certain types of values.

Many properties permit keywords like thin, medium and thick for border widths, or black and white for color properties or sans-serif or monospace for font names. Quotes should never be used around keywords.

Color values can also be expressed in RGB hex format, e.g. #80a0c0 or #ffff00. Or they can be specified using decimal values in the form rgb(128, 160, 192). System colors can be specified using keywords like ButtonFace, InactiveBorder or MenuText.

For properties that expect a URI the notation is url("http://www.example.net/bg.gif") - with or without the quotation marks. Either relative or absolute URLs can be used but note that for external style sheets, the URL is relative to the style sheet's location, not the page's.

Strings

Strings can be delimited by either double or single quotes. To insert the same type of quote within the string, use the escape character ('\').

'A string with "double" quotes.'
"A string with 'single' quotes."
"A string with \"double\" quotes."
'A string with \'single\' quotes.'

Special characters can be included using the escape character followed by a hexadecimal value representing the Unicode character code. For example,

"A string with a left and right \0000ABdouble arrow\0000BB quotes."

represents "A string with a left and right «double arrow» quotes." Note that leading zeros are used to create a full, six-digit hexadecimal value. Otherwise "\ABdouble" would be interpreted as the character 0xABD followed by "ouble." You might want to make a habit of always using six digits to avoid surprises.

To embed a newline character in a string, use the escape sequence "\00000A" and to include a backslash, use the "\\" escape sequence.

Fonts

Specifying a font face can be tricky because a browser can only display the fonts that are installed on the user's machine. CSS defines five generic fonts specified as keywords: serif, sans-serif, cursive, fantasy and monospace. Browsers should map these to an appropriate font installed on the user's system.

A browser will also look at other font characteristics, like font-weight and font-style, to select a particular variation of an installed font.

As with colors, CSS also provides keywords to match system fonts. These include fonts for interfaces and controls like menu, caption and icon.

You can also specify font names. When specifying a font face, either with the font-family property or the shorthand font property, you can provide a list of values, separated by commas (',').

  font-family: "Arial", "Helvetica", sans-serif;

The browser will search for a matching available font in the order given, using the first it finds. This is especially useful when you consider that while a certain font may be common on one platform, it may not exist on others. By specifying a group of similar, platform-dependent fonts, you can get a more consistent look across platforms.

For the same reason, it's also a good idea to include one of the generic font face keywords at the end of any font list.

Note that font names must be enclosed in quotes if they contain any spaces.

Lengths and Units

Many properties expect size or dimension values, like font-size or width and height. These usually consist of a number and a unit and are commonly referred to as lengths. The numeric values allowed (integer, real, positive, negative, etc.) depends on the individual property.

Units are divided into two categories, absolute and relative. The absolute units are:

With absolute units, the browser must account for the resolution of the output medium (screen resolution, printer dpi, etc.) to get the desired length For example, the following

#square { background-color: #c0c0c0; width: 2in; height: 2in; }

...

<div id="square"></div>

should produce a gray box exactly two inches square on any monitor or printer.

Absolute units are well suited for print styles where page dimensions are known in advance (e.g., 8½" x 11") but are not usually used for normal screen viewing (except maybe for font sizes) since users have a variety of monitor sizes and display resolutions. Also, browsers tend to miscalculate or assume an incorrect display resolution.

Relative units relate to some other length value. The relative units are:

So given this code,

#text {
  font-family: sans-serif;
  font-size: 12pt;
  background-color: #c0c0c0;
  width: 20em;
}

...

<div id="text">Some text.</div>

you would get a gray box 240 points wide.

It may seem counterintuitive that the px unit is considered relative. While a browser may assign one screen pixel per px unit, it will usually scale the value for a higher resolution device like a printer.

For example, a font size of 48px might take up half an inch on a 96 dpi monitor, but on a 600 dpi printer it would be less than a tenth of an inch tall, far too small to be easily read. So browsers generally scale content accordingly when printing a page.

They may also scale pixel units based on monitor resolution to account for differences between say, a 72 dpi monitor vs. a 96 dpi monitor.

Percentages

Some length values may be expressed as percentages (e.g., 50%). Like relative units, a percentage value is calculated using some other value. For example,

h1 { font-size: 200% }

would make H1 text twice the size of the page's default font since it would normally inherit the font-size of the BODY tag.