HTML The Definitive Guide (92 page)
Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
1.5cm
+0.25mm
-3pt
-2.5pc
+100em
-2.75ex
250px
9.3.1.3 Percentage property values
Similar to the relative length-value type, a percentage value describes a proportion relative to some other aspect of the content. It has an optional sign and decimal portion to its numeric value, and must have the percent sign (%) suffix. For example: line-height: 120%
computes the separation between lines to be 120 percent of the current line height (usually relative to the text font height). Note that this value is not dynamic, though: changes made to the font height after the rule has been processed by the browser will not affect the computed line height.
9.3.1.4 URL property values
Some properties also accept, if not expect, a URL as a value. The syntax for using a URL in a style property is different from conventional HTML: url(
service
://
server.com
/
pathname
) The keyword url is required, as are the opening and closing parentheses. Do not leave any spaces between url and the opening parenthesis. The url value may contain either an absolute or a relative URL.
However, note that the URL is relative to the immediate style sheet's URL, the one in which it is declared.
This means that if you use a url value in a document-level or inline style, the URL is relative to the HTML
document containing the style document. Otherwise, the URL is relative to the @imported or ed external style sheet's URL.
9.3.1.5 Color property values
Color values specify colors in a property (surprised?). You can specify a color as a color name or a hexadecimal RGB triple, as is done for common HTML attributes, or as a decimal RGB triple unique to style properties. Both color names and hexadecimal RGB triple notation are described in
Appendix F, Color
Unlike regular HTML, style sheets will accept three-digit hexadecimal color values. The single digit is doubled to create a conventional six-digit triple. Thus, the color #78C is equivalent to #7788CC. In general, three-digit color values are handy only for simple colors.
The decimal RGB triple notation is a bit different: rgb(red, green, blue)
The red, green, and blue intensity value are integers in the range zero to 255 or integer percentages. As with a URL value, do not leave any spaces between rgb and the opening parenthesis.
For example, in decimal RGB convention, the color white is rgb(255, 255, 255) or rgb(100%, 100%, 100%), and a medium yellow is rgb(127, 127, 0) or rgb(50%, 50%, 0%).
9.3.2 Property Inheritance
In lieu of a specific rule for a particular tag, properties and their values for tags within tags are inherited from the parent tag. Thus, setting a property for the
tag effectively applies that property to every tag in the body of your document, except for those that specifically override it. So, to make all the text in your document blue, you need only say: BODY {color: blue}rather than create a rule for every tag you use in your document.
This inheritance extends to any level. If you later created a
In many of the following property descriptions, we refer to the tag containing the current tag as the "parent element" of that tag.
9.3.3 Font Properties
The loudest complaint we hear about HTML is that the language lacks font styles and characteristics that even the simplest of text editors implement. The various attributes address part of the problem, but they are tedious to use since each text font change requires a different tag.
Style sheets change all that, of course. The CSS standard provides six font properties that modify the appearance of text contained within the affected tag: font-family, font-height, fontsize, fontstyle, font-variant, and font-weight. In addition, there is a universal font property that lets you declare all of the font changes with a single property.
Please be aware that style sheets cannot overcome limitations of the client system; nor can the browser conjure effects if the fonts it uses do not provide the means.
9.3.3.1 The font-family property
The font-family property accepts a comma-separated list of font names, one of which will be selected by the styles-conscious browser for display of the tag's text. The browser uses the first font named in the list that also is installed and available for display on the client machine.
Font name values are for specific font styles, such as Helvetica or Courier, or a generic font style as defined by the CSS standard: serif, sans-serif, cursive, fantasy, and monospace. Each browser defines which actual font name is to be used for each generic font. For instance, Courier is the most popular choice for a monospace font.
Since fonts vary wildly among browsers, when specifying a font style, you should always provide several choices, ending with a suitable generic font. For example: H1 {font-family: Helvetica, Univers, sans-serif}
causes the browser to look for and use Helvetica, and then Univers. If neither font is available for the client display, the browser will use the generic sans serif typeface.
Enclose font names that contain spaces - New Century Schoolbook, for example - in quotation marks. For example:
P {font-family: Times, "New Century Schoolbook", Palatino, serif}
That extra set of double quotation marks in an inline style rule will cause problems. Accordingly, use single quotation marks in an inline style:
In practice, you need not use quotation marks: the browser will ignore spaces before and after the font name, and convert multiple internal spaces to a single space. Thus: P {font-family: Times, New Century Schoolbook, Palatino, serif}
are both legal, but we recommend that you use quotation marks anyway, just in case things change.
9.3.3.2 The fontsize property
The fontsize property lets you prescribe absolute or relative length values, percentages, and keywords to define the font size. For example:
P {fontsize: 12pt}
P {fontsize: 120%}
P {fontsize: +2pt}
P {fontsize: medium}
P {fontsize: larger}
The first rule is probably the most used because it is the most familiar: it sets the font size to a specific number of points (12 in this example). The second example rule sets the font size to be 20 percent larger than the parent element's font size. The third increases the font size by two points.
The fourth example selects a predefined size set by the browser, identified by the medium keyword. Valid absolute-size keywords are xx-small, x-small, small, medium, large, x-large, and xx-large, and usually correspond to the seven font sizes used with the size attribute of the tag.
The last fontsize rule selects the next size larger than the font associated with the parent element. Thus, if the size were normally medium, it would be changed to large. You can also specify smaller, with the expected results.
Incremental point sizes (+2pt, for example) are not currently handled correctly by any browser.
9.3.3.3 The fontstyle property
Use the fontstyle property to slant text. The default style is normal, and may be changed to italic or oblique. For example:
H2 {fontstyle: italic}
makes all level-two header text italic. As of this writing, Netscape 4 supports only the italic value for fontstyle; Internet Explorer 4 supports both values.
9.3.3.4 The font-variant property
The font-variant property lets you select a variant of the desired font. The default value for this property is normal, indicating the conventional version of the font. You may also specify small-caps to select a version of the font in which the lowercase letters have been replaced with small capital letters.
This property is not supported by Netscape; Internet Explorer 4 incorrectly implements small-caps as all uppercase.
9.3.3.5 The font-weight property
The font-weight property controls the weight or boldness of the font. The default value of this property is normal. You may specify bold to obtain a bold version of a font, or use the relative bolder and lighter values to obtain a version of the font that is bolder or lighter than the parent element's font.
To specify varying levels of lightness or boldness, set the value to a multiple of 100, between the values 100
(lightest) and 900 (boldest). The value 400 is equal to the normal version of the font, and 700 is the same as specifying bold.
Internet Explorer 4 and Netscape 4 support the normal and bold values, with Internet Explorer 4
supporting the lighter and bolder values as well. Both browsers support the numeric boldness values.
9.3.3.6 The font property
More often than not, you'll find yourself specifying more than one font-related property at a time for a tag's text content display. A complete font specification can get somewhat unwieldy; for example: P {font-family: Times, Garamond, serif;
font-weight: bold;
fontsize: 12pt;
line-height: 14pt}
To mitigate this troublesome and potentially unreadable collection, use the comprehensive font property and group all of these attributes into one set of declarations: P {font: bold 12pt/14pt Times, Garamond, serif}
The grouping and ordering of font attributes is important within the font property. The font style, weight, and variant attributes must be specified first, followed by the font size and the line height separated by a slash character, and ending with the list of font families. Of all the properties, the size and family are required; the others may be omitted.
Here are some more sample font properties: EM {font: italic 14pt Times}
H1 {font: 900 24pt/48pt sans-serif}
CODE {font: 12pt Courier, monospace}
The first example tells the styles-conscious browser to emphasize text using a 14-point italic Times face. The second rule has text displayed in the boldest 24-point sans-serif font available, with an extra 24 points of space between the lines of text. Finally, text within a
tag is set in 12-point Courier or the browser-defined monospace font.
We leave it to your imagination to conjure up examples of the abuses you could foster with the font styles.
Perhaps a recent issue of
Wired
magazine, notorious for their avant-garde font and other print-related abuses, would be helpful in that regard?
9.3.4 Color and Background Properties
Every element in your document has a foreground and a background color that the browser uses to render the element. In some cases, the background is not a color, but an image. The color and background style properties control these colors and images.
The children of an HTML element normally inherit the foreground color of their parent. For instance, if you make
text red, the styles-conscious browser also will display header and paragraph text in red.Background properties behave differently, however - they are not inherited. Instead, each element has a default background that is transparent, allowing the parent's background to show through. Thus, setting the background image of the
tag does not cause that image to be reloaded for every element within the body tag. Instead, the browser loads the image once and displays it behind the rest of the document, serving as the background for all elements which do not themselves have an explicit background color or image.9.3.4.1 The background-attachment property
If you specify a background image for an element, use the background-attachment property to control how that image is attached to the browser's display window. With the default value scroll, the browser moves the background image with the element as the user scrolls through the document. A value of fixed prevents the image from moving.
Netscape does not support this style property.
9.3.4.2 The background-color property
The background-color property controls the (you guessed it!) background color of an element. Set it to a color value or to the keyword transparent. The default value is transparent. The effects should be obvious.
While you may have become accustomed to setting the background color of an entire document through the special attributes for the
tag, the background-color style property can be applied to any HTML element. For example, to set the background color of one item in a bulleted list, you could use:If you really want your emphasized text to stand out, paint its background red: EM {background-color: red}
Netscape does not support this CSS property explicitly, but you may achieve the same effects through its support of the general background property, as discussed in section
Section 9.3.4.6, "The background
9.3.4.3 The background-image property
The background-image property puts an image behind the contents of an HTML element. Its value is either a URL or the keyword none. The default value is none.
As with background colors, you can place a background image behind the entire document, or behind selected elements of a document. With this style property, effects like placing an image behind a table or