 |
Chapter 9 Cascading Style Sheets |
 |
|
Chapter 9 Cascading Style Sheets |
|
At the heart of the Cascading Style Sheet specification are 53 properties that let you control how the style-conscious browser presents your documents to the user. The standard collects these properties into six groups: fonts, colors and backgrounds, text, boxes and layout, lists, and tag classification. We'll stick with that taxonomy, and preface the whole shebang with a discussion of property values and inheritance before diving into the properties themselves.
You'll find a summary of the style properties in Appendix C, Cascading Style Sheet Properties Quick Reference.
There are five distinct kinds of property values: keywords, length values, percentage values, URLs, and colors.
A property may have a keyword value that expresses action or dimension. For instance, the effects of underline and line-through are obvious property values. And you can express property dimensions with keywords like small and xx-large. Some keywords are even relational: bolder, for instance, is an acceptable value for the font-weight property. Keyword values are not case sensitive: Underline, UNDERLINE, and underline are all acceptable keyword values.
So-called length values (a term taken from the CSS standard) explicitly state the size of a property. They are numbers, some with decimals, too. Length values may have a leading "+" or "-" sign to indicate the value is to be added to or subtracted from the immediate value of the property. Length values must be followed immediately by a two-letter unit abbreviation--with no intervening spaces.
There are three kinds of length-value units: relative, pixels, and absolute. Relative units specify a size that is relative to the size of some other property of the content. Currently, there are only two relative units: em, which is the height of the current font (written as em), and x-height, which is the height of the letter "x" in the current font (abbreviated ex). The pixels unit, abbreviated px, is equal to the size of a pixel on the browser's display. Absolute property value units are more familiar to us all. They include inches (abbreviated in), centimeters (cm), millimeters (mm), points (pt, 1/72 of an inch), and picas (pc, twelve points).
All of the following are valid length values, although not all units are recognized by the style-conscious browsers:
1in 1.5cm +0.25mm -3pt -2.5pc +100em -2.75ex 250px
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.
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 <link>ed external style sheet's URL.
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 Names and Values; we describe decimal triples below.
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%).
Currently, no browser supports the rgb notation for color values. You must use either a hexadecimal triple or a color name in your style sheets instead.
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 <body> 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 <div> tag with text of a different color, the style-conscious browser will display all the text contents of the <div> tag and all its enclosed tags in that new color. When the <div> tag ends, the color reverts to the that of the containing <body> tag.
In many of the following property descriptions, we refer to the tag containing the current tag as the "parent element" of that tag.
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 <font> attributes supported by the extended browsers address part of the problem, but they are tedious to use since each text font change requires a different <font> 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, font-size, font-style, 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.
The font-family property accepts a comma-separated list of font names, one of which will be selected by the style-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.
For font names that contain spaces--New Century Schoolbook, for example--enclose them 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:
<p style="font-family: Times, 'New Century Schoolbook', Palatino, serif">
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}
<p style="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.
The font-size property lets you prescribe absolute or relative length values, percentages, and keywords to define the font size. For example:
P {font-size: 12pt}
P {font-size: 120%}
P {font-size: +2pt}
P {font-size: medium}
P {font-size: 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 <font> tag.
The last font-size 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.
The relative and absolute size keywords are not currently supported by any browser.
Use the font-style property to slant text. The default style is normal, and may be changed to italic or oblique. For example,
H2 {font-style: italic}
makes all level-two header text italic. As of this writing, Netscape 4 and Internet Explorer 3 support only the italic value for font-style.
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 any browser.
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 3 and Netscape 4 support the normal and bold values. Neither support the lighter and bolder values. Netscape supports the numeric boldness values; Internet Explorer does not.
font property
Internet Explorer 3 does support a series of "traditional" boldness names taken from old-style typography. These names are extra-light, light, demi-light, medium, demi-bold, bold, and extra-bold. These names were used in an early draft of the CSS standard and then dropped from the final recommended standard. We don't recommend using these names; expect Internet Explorer to drop support for them at some point. (Too bad, actually.)
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;
font-size: 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. [the section called "The line-height property"]
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 style-conscious browser to emphasize <em> text using a 14-point italic Times face. The second rule has <h1> 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 <code> 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?
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 <body> text red, the style-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 <body> 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.
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.
Internet Explorer 3 does not support this style property explicitly, but emulates it for the <body> tag with the bgproperties=fixed attribute. [the section called "The bgproperties attribute"]
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 <body> 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:
<li style="background-color: blue">
Similarly, all the table header cells in a document could be given a reverse video effect with:
TH {background-color: black; color: white}
If you really want your emphasized text to stand out, paint its background red:
EM {background-color: red}
Internet Explorer 3 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 9.3.4.6.
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 selected text are now simple:
<table style="background-image: url(backgrounds/woodgrain.gif)">
LI.marble {background-image: url(backgrounds/marble.gif)}
The first example uses an inline style to place a woodgrain finish behind a table. The second defines a list item class that places a marble background behind <li> tag that use the class=marble attribute. For example:
<h2>Here's what's for dinner tonight:</h2> <ul> <li class=marble>Liver with Onions <li class=marble>Mashed Potatoes and Gravy <li class=marble>Green Beans <li class=marble>Choice of Milk, Tea, or Coffee </ul> <h2>And for dessert:</h2> <ul> <li>Creamed Quats in Milk (YUM! YUM!) </ul>
will produce a result like that in Figure 9.1.
If the image is larger than the containing element, it will be clipped to the area occupied by the element. If smaller, the image will be repeated to tile the area occupied by the element, as dictated by the value of the background-repeat attribute.
You control the position of the image within the element with the background-position property. The scrolling behavior of the image is managed by the background-attachment property.
While it may seem that a background color and a background image are mutually exclusive, you should usually define a background color even if you are using a background image. That way, if the image is unavailable, such as when the user doesn't automatically download images, the browser will display the background color instead. In addition, if the background image has transparent areas, the background color will be used to fill in those areas.
Internet Explorer 3 does not support the background-image property explicitly, but you may achieve the same effects through its support of the general background property, as discussed in the section called "The background property".
By default, the style-conscious browser renders a background image starting in the upper-left corner of the allotted display area and tiled (if necessary) down and over to the lower-right corner of that same area. With the background-position property, you can offset the starting position of the background image down and to the right of that default point by an absolute (length) or relative (percentage or keyword) offset. The resulting image fills the area from that offset starting point to the lower-right corner of the display space.
You may specify one or two values for the background-position property. If you use a single value, it applies to both the vertical and horizontal positions. With two values, the first is the horizontal offset, and the second is the vertical offset.
Length values (with their appropriate units; see the section called "Length property values") indicate an absolute distance from the upper-left corner of the element behind which you display the background image. For instance,
![[Graphic: Figure 9-1]](./figs/h2_0901.gif)
TABLE {background-image: url(backgrounds/marble.gif);
background-position: 10px 20px}
offsets the marble background 10 pixels to the right and 20 pixels down from the upper-left corner of any <table> element in your document.
Percentage values are a bit trickier, but somewhat easier to use. Measured from 0 to 100 percent from left to right and top to bottom, the center of the HTML element's content display space is at 50%, 50%. Similarly, the position one-third of the way across the area and two-thirds of the way down is at 33%, 66%. So, to offset the background for our example dinner menu to the center of the element's content display space, we use:
background-position: 50% 50%
You'll notice that the browser places the first marble.gif tile at the center of the content display area and tiles to the right and down the window, as shown in Figure 9.2.
So, why use a number when a single word will do? You can use the keywords left, center, and right, as well as top, center, and bottom, for 0%, 50%, and 100%, respectively. To center an image in the tag's content area, then, you need only write:
background-position: center center
You can mix and match length and percentage values,[3] so that
[3] That is, if the browser supports the value units. So far, Internet Explorer and Netscape support only a meager repertoire of length units--pixels and percents.
background-position: 1cm center
places the image one centimeter to the right of the tag's left edge, centered vertically in the tag's area.
Internet Explorer 3 does not support this CSS property explicitly, but you may achieve similar effects with the general background property. See the section called "The background property".
Normally, the browser tiles a background image to fill the allotted space, repeating the image both down and to the right. Use the background-repeat property to alter this "repeat" (default value) behavior. To have the image repeat horizontally but not vertically, use the value repeat-x. For only vertical repetition, use repeat-y. To suppress tiling altogether, use no-repeat.
A common use of this property is to place a watermark or logo in the background of a page without repeating the image over and over. For instance:
![[Graphic: Figure 9-2]](./figs/h2_0902.gif)
BODY {background-image: url(backgrounds/watermark.gif);
background-position: center middle;
background-repeat: no-repeat
}
will place the watermark image in the background at the center of the page.
Another popular trick is to create a vertical ribbon down the right-hand side of the page:
BODY {background-image: url(backgrounds/ribbon.gif);
background-position: top right;
background-repeat: repeat-y
}
Internet Explorer 3 does not support this CSS property explicitly, but you may achieve similar effects with the general background property, described in the next section.
Like the various font properties, the many background CSS properties can get cumbersome to write and hard to read later. So, like the font property, there also is a general background property.
The background property accepts values from any and all of the background-color, background-image, background-attachment, background-repeat, and background-position roperties, in any order. If you do not specify values for some of the properties, that property is explicitly set to its default value. Thus,
background: red
sets the background-color property to red and resets the other background properties to their default values. A more complex example:
background: url(backgrounds/marble.gif) blue repeat-y fixed center
sets all the background image and color properties at once, resulting in a marble image on top of a blue background (blue showing through any transparent areas). The image repeats vertically, starting from the center of the content display area, and does not scroll when the user scrolls the display. Notice that we included just a single position value (center) and the browser used it for both the vertical and horizontal positions.
Internet Explorer 3 supports only the background property and does not honor any of the individual background properties. For this reason, you may want to use the background property to achieve the broadest acceptance of your background image and color properties.
The color property sets the foreground color for a tag's contents--the color of the text lettering, for instance. Its value is either the name of a color, a hexadecimal RGB triple, or a decimal rgb triple, as outlined in 9.3.1.5. Thus, the following are all valid property declarations:
color: mauve color: #ff7bd5 color: rgb(255, 125, 213) color: rgb(100%, 49%, 84%)
Generally, you'll use the color property with text, but you may also modify non-textual content of a tag. For example, the following example produces a green horizontal rule:
HR {color: green}
If you do not specify a color for an element, it inherits the color of its parent element.
Cascading style sheets make a distinction between font properties, which control the size, style, and appearance of text, and text properties, which control how text is aligned and presented to the user.
The letter-spacing property puts additional space between text letters as they are displayed by the browser. Set the property with either a length value or the default keyword normal, indicating that the browser should use normal letter spacing. For example:
line-height property
BLOCKQUOTE {letter-spacing: 2px}
puts an additional two pixels between adjacent letters within the <blockquote> tag.
This property currently is not supported by any browser.
Use the line-height property to define the spacing between lines of a tag's text content. Normally, browsers single-space text lines--the top of the next line is just a few points below the last line. By adding to that line height (more commonly known as leading among typographers), you increase the amount of space between lines.
The line-height value can be an absolute or relative length, a percentage, a scaling factor, or the keyword normal. For example:
P {line-height: 14pt}
P {line-height: 120%}
P {line-height: 2.0}
The first example sets the line height to exactly 14 points between baselines of adjacent lines of text. The second computes the line height to 120 percent of the font size. The last example uses a scaling factor to set the line height to twice as large as the font size, creating double-spaced text. The value normal, the default, is usually equal to a scaling factor of 1.0 to 1.2.
Keep in mind that absolute and percentage values for line-height compute the line height based upon the value of the font-size property when the line-height property is defined. The computed property value will be inherited by children of the element. Subsequent changes to font-size by either the parent or child elements will not change the computed line-height.
Scaling factors, on the other hand, defer the line-height computation until the text is actually displayed. Hence, varying font-sizes affect line-height locally. In general, it is best to use a scaling factor for the line-height property so that the line height will automatically change when the font size is changed.
Although usually considered separate from font properties, you may include this text-related line-height property's value as part of the shorthand notation of the font property. [the section called "The font property"]
Internet Explorer 3 does not support scaling factors and may compute relative line heights incorrectly for text containing multiple font sizes.
Text justified with respect to the page margins is a rudimentary feature of nearly all text processors. The text-align property brings that capability to HTML for any block-level tag. Use one of four values: left, right, center, or justify. The default value is, of course, left. For example,
DIV {text-align: right}
tells the style-conscious browser to align all the text inside <div> tags against the right margin. The justify value tells the browser to align the text to both the left and right margins, spreading the letters and words in the middle to fit.
Internet Explorer 3 does not support the justify value for this property.
The text-decoration property produces all sorts of text embellishments, some of which also are available with the original physical style tags. Its value is one or more of the keywords underline, overline, line-through, and blink. The value none is the default and tells the style-conscious browser to present text normally.
The text-decoration property is handy for defining different link appearances. For example,
A:visited A:link A:active {text-decoration: underline overline}
puts lines above and below the links in your document.
This text property is not inherited, and non-textual elements are not affected by the text-decoration property.
Internet Explorer supports only the underline and line-through values for text-decoration; Netscape does not support the overline value.
Although less common today, it still is standard practice to indent the first line of a paragraph of text.[4] And some text blocks, such as definitions, typically "out-dent" the first line, creating what is called a hanging indent.
[4] But not, obviously, in this book.
The CSS text-indent property lets you apply these features to any block tag and thereby control the amount of indentation of the first line of the block. Use length and percentage values; negative values create the hanging indent. Percentage values compute the indentation as a percentage of the parent element's width. The default value is zero.
To indent all the paragraphs in your document, for example:
P {text-indent: 3em}
The length unit em scales the indent as the font of the paragraph changes in size on different browsers.
Hanging indents are a bit trickier because you have to watch out for the element borders. Negative indentation does not shift the left margin of the text; it simply shifts the first line of the element left, possibly into the margin, border, or padding of the parent element. For this reason, hanging indents only work as expected if you also shift the left margin of the element to the right by an amount equal to or greater than the size of the hanging indent. For example,
P.wrong {text-indent: -3em}
P.hang {text-indent: -3em; margin-left: 3em}
P.large {text-indent: -3em; margin-left: 6em}
creates three paragraph styles. The first creates a hanging indent that extends into the left margin. The second creates a conventional hanging indent. The third creates a paragraph whose body is indented more than the hanging indent. All three styles are shown in use in Figure 9.3.
The text-transform property changes the case for all the text within a tag. Valid values for this property are capitalize, uppercase, lowercase, and none, which is the default. The value capitalize ensures that the first letter of every word gets capitalized, while uppercase and lowercase affect every letter in the text.
The actual capitalization rules used by the browser depend upon the character encoding and language used by the browser.
This property is not supported by Internet Explorer 3. While supported by Netscape, this property is not inherited by child elements, as prescribed by the CSS standard.
The vertical-align property controls the relative position of an element with respect to the line containing the element. Valid values for this property include:
align the baseline of the element with the baseline of the containing element
align the middle of the element with the middle (usually the x-height) of the containing element
subscript the element
superscript the element
align the top of the element with the top of the font of the parent element
align the bottom of the element with the bottom of the font of the parent element
align the top of the element with the top of the tallest element in the current line
align the bottom of the element with the bottom of the lowest element in the current line
In addition, a percentage value indicates a position relative to the current baseline, so that a position of 50% puts the element halfway up the line height above the baseline. A position value of -100% puts the element an entire line-height below the baseline of the current line.
This property is not supported by any browser.
Use the word-spacing property to add additional space between words within a tag. You can specify a length value or the keyword normal to revert to normal word spacing. For example,
![[Graphic: Figure 9-3]](./figs/h2_0903.gif)
H3 {word-spacing: 25px}
places an additional 25 pixels of space between words in the <h3> tag.
This property is currently not supported by any browser.
The CSS model assumes that HTML elements always fit within a rectangular box. Using the properties defined in this section, you can control the size, appearance, and position of the boxes containing the elements in your documents.
Each element in an HTML document can fit in a rectangular box. The CSS authors call this box the "core content area" and surround it with three more boxes: the padding, the border, and the margin. Figure 9.4 shows these boxes and defines some useful terminology.
The top, bottom, left-outer, and right-outer edges bound the content area of an element and all of its padding, border, and margin spaces. The inner-top, inner-bottom, left-inner, and right-inner edges define the sides of the core content area. The extra space around the element is the area between the inner and outer edges, including the padding, border, and margin. A browser may omit any and all of these extra spaces for any HTML element, and for many, the inner and outer edges are the same.
When elements are vertically adjacent, the bottom margin of the upper elements and the top margin of the lower elements overlap, so that the total space between the elements is the greater of the adjacent margins. For example, if one paragraph has a bottom margin of one inch, and the next paragraph has a top margin of one-half inch, the greater of the two margins, one inch, will be placed between the two paragraphs. These practice is known as margin collapsing and generally results in better document appearance.
Horizontally adjacent elements do not have overlapping margins. Instead, the CSS model adds together adjacent horizontal margins. For example, if a paragraph has a left margin of one inch, and is adjacent to an image with a right margin of one-half inch, the total space between the two will be 1.5 inches. This rule also applies for nested elements, so that a paragraph within a division will have a left margin equal to the sum of the division's left margin and the paragraph's left margin.
As shown in Figure 9.4, the total width of an element is equal to the sum of seven items: the left and right margins, the left and right borders, the left and right padding, and the element's content itself. The sum of these seven items must equal the width of the containing element. Of these seven items, only three (the element's width, and its left and right margins) can be given the value auto, indicating that the browser can compute a value for that property. When this becomes necessary, the browser follows these rules:
There are special rules for floating elements. A floating element (such as an image with align=left specified) will not have its margins collapsed with the margins of containing or preceding elements, unless the floating element has negative margins. This is easy to see in Figure 9.5, which shows how this bit of HTML might be rendered:
<body> <p> <img align=left src="pics/img.gif"> Some sample text... </body>
The browser moves the image, including its margins, as far as possible to the left and towards the top of the paragraph without overlapping the left and top margins of the paragraph or the document body. The left margins of the paragraph and the containing body are added, while their top margins are collapsed.
The border surrounding an element has a color, a thickness, and a style. You use various properties to control these three aspects of the border on each of the four sides of an element. Shorthand properties make it easy to define the same color, thickness, and style for the entire border, if desired. Border properties are not inherited; you must explicitly set them for each element that has a border.
Unfortunately, none of the border properties are currently implemented by either Netscape or Internet Explorer.
Use the border-color property to set the border color. If not specified, the browser draws the border using the value of the element's color property.
The border-color property accepts from one to four color values. The number of values determines how they are applied to the borders (summarized in Table 9.1). If you include just one property value, all four sides of the border are set to the specified color. Two values set the top and bottom borders to the first value and the left and right borders to the second value. With three values, the first is the top border, the second sets the right and left borders, and the third color value is for the bottom border. Four values specify colors for each side, clock-wise from the top, then right, bottom, and left borders, in that order.
|
Number of values |
Affected border(s), margin(s), or padding |
|---|---|
|
1 |
All same. |
|
2 |
First value sets top and bottom; second value sets left and right. |
|
3 |
First value sets top; second sets both left and right; third value sets bottom. |
|
4 |
First value sets top; second sets right; third sets bottom; and fourth value sets left. |
The border-width property lets you change the width of the border. Like the border-color property, it accepts from one to four values that are applied to the various borders in a similar manner (Table 9.1).
Besides a specific length value, you may also specify the width of a border as one of the keywords thin, medium, or thick. The default value, if the width is not explicitly set, is medium. Some typical border widths are:
border: 1px border: thin thick medium border: thick 2mm
The first example sets all four borders to exactly one pixel. The second makes the top border thin, the right and left borders thick, and the bottom border medium. The last example makes the top and bottom borders thick, while the right and left borders will be 2 mm wide.
If you are uncomfortable defining all four borders with one property, you can use the individual border-top-width, border-bottom-width, border-left-width, and border-right-width properties to define the thickness of each border. Each property accepts just one value; the default is medium.
According to the CSS model, you have a number of embellishments you may apply to your HTML element borders.
The border-style property values include none (default), dotted, dashed, solid, double, groove, ridge, inset, and outset. The border-style-conscious browser applies one to four values for the property to each of the borders in the same order as for the border colors and widths, as described in Table 9.1.
The browser draws dotted, dashed, solid, and double borders as flat lines atop the tag's background. The groove, ridge, inset, and outset values create three-dimensional borders: The groove is an incised line; the ridge is an embossed line; the inset border makes the entire tag area appear set into the document; and the outset border makes the entire tag area appear raised above the document. The effect of the three-dimensional nature of these last four styles upon the tag's background image is undefined and left up to the browser. We'd like to show you examples, but none are supported by any current browser.
Since specifying a complex border can get tedious, the CSS standard provides five shorthand properties that accept any or all of the width, color, and style values for one or all of the border edges. The border-top, border-bottom, border-left, and border-right properties affect their respective borders sides; the comprehensive border property controls all four sides of the border simultaneously. For example:
border-top: thick solid blue border-left: 1ex inset border-bottom: blue dashed border: red double 2px
The first property makes the top border a thick, solid, blue line. The second sets the left border to use an inset effect that is as thick as the x-height of the element's font, while leaving the color the same as the element's color. The third property creates a blue dashed line at the bottom of the element, using the default medium thickness. Finally, the last property makes all four borders a red double line two pixels thick.
That last property raises two issues. First, you cannot supply multiple values to the border property to selectively affect certain borders like you can with the individual border-color, border-width, and border-style properties. The border property always affects all four borders around an element.
Secondly, a bit of reflection should reveal that it is not possible to create a double-line border just two pixels thick. In cases like this, the browser is free to adjust the thickness to render the border properly.
While we usually think of borders surrounding block elements like images, tables, and text flows, borders can also be applied to inline tags. This lets you put a box around a word or phrase within a text flow. The implementation of borders on inline tags that span multiple lines is undefined and left to the browser.
Like its cousin attribute for the <br> tag, the clear property tells the browser whether to place a tag's contents adjacent to a "floating" element, or on the first line below. Text flows around floating elements like images and tables with an align=left or align=right attribute, or any HTML element with its float property set to anything but none. [the section called "The <br> Tag"] [the section called "The float property"]
The value of the clear property can be none, left, right, or both. A value of none, the default, means that the browser acts normally and places the tag's contents adjacent to floating elements on either side if there is room to do so. The value left prevents contents from being placed adjacent to a floating element on its left; right prevents placement against a floating element on the right; and both prevents the tag's contents from appearing adjacent to any floating element.
The effect of this style is the same as having preceded the tag with a <br> tag with its clear attribute. Hence,
float property
![[Graphic: Figure 9-4]](./figs/h2_0904.gif)
![[Graphic: Figure 9-5]](./figs/h2_0905.gif)
H1 {clear: left}
has the same effect as preceding every <h1> tag with <br clear=left>.
The clear property currently is not supported by Internet Explorer.
The float property designates a tag's display space as a floating element and causes text to flow around it in a specified manner. It is generally analogous to the align attribute for images and tables, but can be applied to any element, including text, images, and tables. [the section called "The align attribute"] [the section called "The align attribute"]
The float property accepts one of three values: left, right, or none, the default. Using none disables the float property; the others work like their align attribute-value counterparts, telling the browser to place the content to either side of the flow and allow other content to be rendered next to it.
Accordingly, the style-conscious browser will place a tag's contents specified with float: left against the left margin of the current text flow, and subsequent content will flow to its right, down and below the tag's contents. The float: right pair puts the tag contents against the right edge of the flow and flows other content on its left, down and below the tag's contents.
Although most commonly used with tables and images, it is perfectly acceptable to apply the float property to a text element. For example, the following would create a "run-in" header, with the text flowing around the header text.
H1 {float: left}
This property is not yet supported by Internet Explorer.
height property
As you might suspect, the height property controls the height of the associated tag's display region. You'll find it most often used with images and tables, but it can be used to control the height of other HTML document elements as well.
The value of the height property is either a length value or the keyword auto, the default. Using auto implies that the affected tag has an initial height that should be used when displaying the tag. Otherwise, the height of the tag is set to the desired height. If an absolute value is used, the height is set to that length value. For example,
IMG {height: 100px}
tells the browser to display the image referenced by the <img> tag scaled so that it is 100 pixels tall. If you use a relative value, the base size to which it is relative is browser and tag dependent.
When scaling elements to a specific height, the aspect ratio of the object can be preserved by also setting the width property of the tag to auto. Thus,
IMG {height: 100px; width: auto}
ensures that the images are always 100 pixels tall, with an appropriately scaled width. [the section called "The width property"]
This property is not yet supported by Internet Explorer; Netscape honors it only when used with the <img> tag.
Like the border properties, the various margin properties let you control the margin space around an element, just outside of its border (Figure 9.4). Margins are always transparent, allowing the background color or image of the containing element to show through. As a result, you can only specify the size of a margin; it has no color or rendered style.
The margin-left, margin-right, margin-top, and margin-bottom properties all accept a length or percentage value indicating the amount of space to reserve around the element. In addition, the keyword auto tells the style-conscious browser to revert to the margins it normally would place around an element. Percentage values are computed as a percentage of the containing element's width. The default margin, if not specified, is zero.
These are all valid margin settings:
BODY {margin-left: 1in; margin-top: 0.5in; margin-right: 1in}
P {margin-left: -0.5cm}
IMG {margin-left: 10%}
The first example creates one-inch margins down the right and left edges of the entire document, and a half-inch margin across the top of the document. The second example shifts the <p> tag one-half centimeter left into the left margin. The last example creates a margin to the left of the <img> tag equal to ten percent of the parent element's width.
Like the shorthand border property, you can use the shorthand margin property to define all four margins, using from one to four values which affect the margins in the order described in Table 9.1. Using this notation, our <body> margins in the above example also could have been specified as:
BODY {margin: 0.5in 1in}
The margin-left and margin-right properties interact with the width property to determine the total width of an element, as described in 9.3.6.1.
Internet Explorer 3 only supports the margin-left, margin-right, and margin-top properties. Accordingly, it only accepts up to three margin property values, and in an order different than the CSS standard: top, left, then right (no bottom).
Like the margin properties, the various padding properties let you control the padding space around an element, between the element's content area and its border (Figure 9.4). Padding is always rendered using the background color or image of the element. As a result, you can specify only the size of the padding; it has no color or rendered style.
The padding-left, padding-right, padding-top, and padding-bottom properties all accept a length or percentage value indicating the amount of space the style-conscious browser should reserve around the element. Percentage values are computed as a percentage of the containing element's width. The default padding is zero.
These are valid padding settings:
P {padding-left: 0.5cm}
IMG {padding-left: 10%}
The first example creates half a centimeter of padding between the contents of the <p> tag and its left border. The last example creates padding to the left of the <img> tag equal to 10 percent of the parent element's width.
width property
Like the shorthand margin and border properties, you can use the shorthand padding property to define all four padding amounts, using one to four values to effect the padding sides as described in Table 9.1.
Internet Explorer 3 does not support any padding properties. Netscape supports only the four individual padding properties, not the shorthand padding property.
The width property is the companion to the height property and controls the width of an associated tag. Specifically, it defines the width of the element's content area, as shown in Figure 9.4. You'll see it most often used with images and tables, but you could conceivably use it to control the width of other elements as well.
The value for width property is either a length or percentage value or the keyword auto. The value auto is the default and implies that the affected tag has an initial width that should be used when displaying the tag. If a length value is used, the width is set to that value; percentage values compute the width to be a percentage of the width of the containing element. For example,
IMG {width: 100px}
displays the image referenced by the <img> tag scaled to 100 pixels wide.
When scaling elements to a specific width, the aspect ratio of the object is preserved if the height property of the tag is set to auto. Thus,
IMG {width: 100px; height: auto}
makes the images all 100 pixels wide, and scales their heights appropriately. [the section called "The height property"]
The width property interacts with the margin-left and margin-right properties to determine the total width of an element, as described in 9.3.6.1.
This property is not supported by Internet Explorer; Netscape honors it only when associated with the <img> tag.
The CSS standard lets you also control the appearance of HTML list elements: specifically, ordered and unordered lists.
Browsers format list items just like any other HTML block item, except that the block has some sort of marker preceding the contents. For unordered lists, the marker is a bullet of some sort; for numbered lists, the marker is a numeric or alphabetic character or symbol. The CSS list properties let you control the appearance and position of the marker associated with a list item.
The list-style-image property defines the image that the browser uses to mark a list item. The value of this property is the URL of an image file, or the keyword none. The default value is none.
The image is the preferred list marker. If it is available, the browser will display it in place of any other defined marker. If the image is unavailable, or if the user has disabled image loading, the marker defined by the list-style-type property (see the section called "The list-style-type property") will be used.
Authors can use this property to define custom bullets for their unordered lists. While any image could conceivably be used as a bullet, we recommend that you keep your marker GIF or JPEG images small to ensure attractively rendered lists.
For example, by placing the desired bullet image in the file mybullet.gif on your server, you could use that image:
LI {list-style-image: url(pics/mybullet.gif); list-style-type: square}
In this case, the image will be used if the browser successfully downloads mybullet.gif. Otherwise, the browser will use a conventional square bullet.
This property is not supported by any browser.
There are two ways to position the marker associated with a list item: inside the block associated with the item, or outside the block. Accordingly, the list-style-position property accepts one of two values: inside or outside.
The default value is outside, meaning that the item marker will hang to the left of the item like this:
The value inside causes the marker to be drawn with the list item flowing around it, much like a floating image:
Notice how the second line of text is not indented, but instead lines up with the left edge of the marker.
This property is not currently supported by any browser.
The list-style-type property serves double-duty in a sense, determining how both ordered and unordered list items are rendered by a style-conscious browser. This property has the same effect on a list item as its type attribute does. [the section called "The type attribute"]
When used with items within an unordered list, the list-style-type property accepts one of four values: disc, circle, square, or none. The browser marks the unordered list items with the corresponding specified dingbat. The default value is disc; browsers change that default depending on the nesting level of the list.
When used with items within an ordered list, the list-style-type property accepts one of six values: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none. These values format the item numbers as decimal values, lowercase Roman numerals, uppercase Roman numerals, lowercase letters, or uppercase letters, respectively. Most browsers will use decimal numbering schemes if you don't set this property.
This property is not supported by any browser.
The list-style property is the shorthand version for all the other list-style properties. It accepts any or all of the values allowed for the list-style-type, list-style-position, and list-style-image properties, in any order and with values appropriate for the type of list it is to affect. These are valid list-style properties:
LI {list-style: disc}
LI {list-style: lower-roman inside}
LI {list-style: url(http://www.kumquat.com/images/tiny-quat.gif)
square}
The first example creates list items that use a disc as the bullet image. The second causes numbered list items to use lowercase Roman numerals, drawn inside the list item's block. In the last example, a square will be used as the bullet image if the referenced image is unavailable.
This property is not currently supported by any browser.
Although you may apply list properties to any HTML element, they will affect only the appearance of elements whose display property is set to list-item. Normally, the only tag with this property is the <li> tag. [the section called "The display property"]
This shouldn't deter you from using these properties elsewhere, particularly with the <ul> and <ol> tags. Since these properties are inherited by elements whose parents have them set, modifying a list property for the <ul> and <ol> tags will subsequently modify it for all the <li> tags contained within that list. This makes it much easier to define lists with a particular appearance.
For example, suppose you want to create a list style that uses lowercase Roman numerals. One way is to define a class of the <li> tag with the appropriate list-style-type defined:
LI.roman {list-style-type: lower-roman}
Within your list, you'll need to specify each list element using that class:
<ol> <li class=roman>Item one <li class=roman>Item two <li class=roman>And so forth </ol>
Having to repeat the class name is tedious and error-prone. A better solution is to define a class of the <ol> tag:
OL.roman {list-style-type: lower-roman}
Any <li> tag within the list will inherit the property and use lowercase Roman numerals:
<ol class=roman> <li>Item one <li>Item two <li>And so forth </ol>
This is much easier to understand and manage. If, at a later date, you want to change the numbering style, you need only change the <ol> tag properties, rather than have to find and change each instance of the <li> tag in the list.
You can use these properties in a much more global sense as well. Setting a list property on the <body> tag will change the appearance of all lists in the document; setting it on a <div> tag will change all the lists within that division.
Classification properties are the most esoteric of the CSS style properties. They do not directly control how a style-conscious browser will render HTML elements. Instead, they tell the browser how to classify and handle various tags and their contents as they are encountered.
For the most part, you should not set these properties on an element unless you are trying to achieve a specific special effect. Even then, it is unlikely that the property will be supported by most browsers.
display property
Every element in an HTML document can be classified, for display purposes, as a block item, an inline item, or a list item. Block elements, like headings, paragraphs, tables, and lists, are formatted as a separate block of text, separated from the previous and next block items. Inline items, like the physical and content-based style tags and hyperlink anchors, are rendered within the current line of text within a containing block. List items, specifically the <li> tag, are rendered like a block item, along with a bullet or number known as the marker.
The display property lets you change an element's display type to block, inline, list-item, or none. The first three values change the element's classification accordingly; the value none turns off the element, preventing it or its children from being displayed in the document.
Conceivably, you could wreak all sorts of havoc by switching element classifications, forcing paragraphs to be displayed as list items and converting hyperlinks to block elements. In practice, this is just puerile monkey business, and we don't recommend that you change element classifications without having a very good reason to do so.
Besides, this property currently is not supported by any browser.
The white-space property defines how the style-conscious browser treats whitespace (tabs, spaces, and carriage returns) within a block tag. The keyword value normal--the default--collapses whitespace, so that one or more spaces, tabs, and carriage returns are treated as a single space between words. The value pre emulates the <pre> tag, in that the browser retains and displays all spaces, tabs, and carriage returns. And, finally, the nowrap value tells the browser to ignore carriage returns and not insert automatic line breaks; all line-breaking must be done with explicit <br> tags.
Like the display property, the white-space property is rarely used for good instead of evil. Don't change how elements handle whitespace without having a compelling reason for doing so.
This property is not supported by any browser.
|
 |
|
| Style Syntax |  |
Tag-Less Styles: The <span> Tag |
