by Jerry Honeycutt
HTML style sheets provide you the capability to decorate the background of an element by using color and images. Note that using the properties described in the following sections doesn't define the background for the Web page as a whole. These properties set the background of an element on the Web page. For example, if you define a background for the <UL> tag, as in the following example, then the background only appears within each occurrence of that tag on the Web page.
UL {background-image: URL(http://www.myserver.com/images/watermark.gif)}
You can group the background properties described in the following sections using background. You specify the background color, image, repeat, attachment, and position like this:
background: white URL(http://www.myserver.com/images/bg.gif) repeat-x fixed top, left
The background-attachment property determines whether the background image is fixed in the browser window or scrolls as the user scrolls the window. You can use this property to create a watermark behind your Web page that stays put regardless of which portion of the Web page the user is viewing.
You can assign two possible values to background-attachment, as described in Table B.1.
| Value | Description |
| fixed | The image is fixed within the browser window. |
| scroll | The image scrolls as the user scrolls the window. |
You can change the background color for an element by using the background-color property. You can assign one of the valid color names to background-color or an RGB value such as #808080 (white). For example, if you define a style for the <UL> tag that changes the background color to blue, then all the unordered lists in your HTML file will be displayed with a blue background.
TIP: Changing the background color for certain types of tags is useful to highlight information on the Web page.
You can display a background image in an element by setting the value of the background-image property to the URL of an image. This has the effect of a watermark displayed behind that element on the Web page (the element's content is displayed over the background image).
You set the URL by using the URL(address) format, like this:
H1 {background-image: URL(http://www.myserver.com/images/heading.gif)}
Units in CSS1
Most style sheet properties accept some sort of length. You can use many different units to specify a length, too. HTML supports two types of units: relative and absolute lengths. The following table describes the relative units.
Unit Example Description em 0.5em The height of the element's font, relative to the output device ex 0.75ex The height of the letter X, relative to the output device px 15px Pixels, relative to the output device
Whenever possible, use relative units so that your Web pages will scale better from one device to the next. You can also use the absolute units as described in the following table.
Unit Example Description in .5in Inches cm 1cm Centimeters mm 20mm Millimeters pt 12pt Points (1pt = 1/72 inch) pc 1pc Pica (1pc = 12pt)
Aside from relative and absolute lengths, you can also specify most lengths in terms of percentages. With HTML style sheets, percentages are almost always relative to the parent element. For example, if you're specifying a font size of 50 percent, what you're really saying is that you want the element's font size to be half as big as the parent element's font size.
You change the position of the background image by using the background-position property. The position is always relative to the top-left corner of the element in which you're positioning the image. That is, if you're positioning an image for the <UL> tag, the image's position will be relative to the top-left corner of the unordered list.
The background-position property looks like
background-position: x y
where x is the horizontal position, and y is the vertical position of the image. x and y can be a percentage, which is relative to the size of the element; a fixed amount such as 1in (one inch); or one of the keywords that indicate a relative position as described in Table B.4. For example:
background-position: center 20
| Keyword | Description |
| top | Aligns the image with the top of the containing element; only useful when substituted for y. |
| left | Aligns the image with the left side of the containing element; only useful when substituted for x. |
| right | Aligns the image with the right side of the containing element; only useful when substituted for y. |
| bottom | Aligns the image with the bottom of the containing element; only useful when substituted for y. |
| center | Centers the image within the containing element; when substituted for x, the image is centered horizontally; when substituted for y, the image is centered vertically. |
You can cause the user's browser to tile the background image so that it fills the entire area of the containing element. The background-repeat property can have four values, as described in Table B.3.
| Value | Description |
| repeat | Repeats the image both vertically and horizontally |
| repeat-x | Repeats the image horizontally |
| repeat-y | Repeats the image vertically |
| no-repeat | Doesn't repeat the image |
The color property determines the foreground color for the element. Thus, the browser displays the element's text using this color. You can set color to a named color or an RGB value. Named colors include those in the following list:
| black | silver | gray | white |
| maroon | red | purple | fuchsia |
| green | lime | olive | yellow |
| navy | blue | teal | aqua |
W3C's style sheet recommendation provides you the capability to define the borders, margins, and padding for elements on the Web page. You can wrap a border around a heading, for example, or change the margins of the <P> tag so that any occurrences of this tag are indented into the page. Here's an overview of the properties that you can use to change the boxes associated with an element:
| Border | You use the border properties to set the left, right, top, and bottom borders of an element. You can set the border's width, color, and style. |
| Margin | You use the margin properties to set the left, right, top, and bottom margins of an element. With these properties, you only specify the size of the margin. |
| Padding | You use the padding properties to specify how much space the browser displays between the border and the content of the element. With the padding properties, you only specify the size of the margin. |
Figure B.1 shows you how the border, margin, and padding properties work with the height and width properties to form the boxes around the element. The following list describe these in more detail:
You can group border properties in five different ways. You can specify the properties for a particular side of the element, using border-top, border-right, border-bottom, or border-left. You can also specify all sides of the border at one time by using border.
With any of these attributes, you specify the width, style, and color of the border, as in the following example:
border-top: thin dotted black
FIG. B.1
Four boxes are actually around each element.
You can group the margin properties using margin. You specify the top, right, bottom, and left, like this:
margin: .5in 1in .5in 1in
You can also group the margin properties using padding. You specify the top, right, bottom, and left padding values, like this:
padding: .25in .25in .25in .25in
If you specify only one value, the browser uses that value for all sides. If you leave out one or more values, the browser takes the missing value from the opposite side. For example, if you leave off the last value (left), the browser sets the left padding to the value you specified for the right margin.
You set the width of the bottom border by using the border-bottom-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.4 to this property.
| Value | Description |
| thin | Displays the border by using a thin line. |
| medium | Displays the border by using a medium line. |
| thick | Displays the border by using a thick line. |
| length | You can define the exact width of the border by using points (pt), inches (in), centimeters (cm), or pixels (px); (for example, 2in). |
The border-color property sets the color of the element's border. You can use a named color, such as RED, or you can use an RGB value, such as #FF0000.
You set the width of the left border by using the border-left-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.6 to this property.
You set the width of the right border by using the border-right-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.6 to this property.
The border-style property determines the style of the border that the browser displays. You can specify from one to four values for this property:
| One Value | All four borders are set to the style. |
| Two Values | The top and bottom borders are set to the style in the first value, and the left and right borders are set to the style in the second value. |
| Three Values | The top border is set to the style in the first value; the right and left borders are set to the style in the second value; and the bottom border is set to the style in the third value. |
| Four Values | The top border is set to the style in the first value; the right border is set to the second value; the bottom border is set to the third value; and the left border is set to the fourth value. |
Table B.5 describes the values you can use for a border's style.
| Value | Description |
| none | No border. |
| dotted | Dotted line drawn over the top of the element. |
| dashed | Dashed line drawn over the top of the element. |
| solid | Solid line. |
| double | Double line drawn over the top of the element; the width of the two lines and the space between them equals the border-width value. |
| groove | 3-D groove drawn in colors based upon color. |
| ridge | 3-D ridge drawn in colors based upon color. |
| inset | 3-D inset drawn in colors based upon color. |
| outset | 3-D outset drawn in colors based upon color. |
You set the width of the top border by using the border-top-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.7 to this property.
TROUBLESHOOTING: I've set the width of my border, but it still doesn't display. Setting the width of the border isn't enough. You also have to set the border style by using the border-style property because the default style for every border is none.
The clear property determines whether the browser can display floating elements on the sides of an element. The property's value indicates the sides on which floating elements are not allowed. For example, clear: left means that the browser can't float elements on the left side of the element. Table B.6 describes the values you can assign to this property.
| Value | Description |
| none | Floating elements are allowed on all sides. |
| left | Floating elements are not allowed on the left. |
| right | Floating elements are not allowed on the right. |
| both | Floating elements are not allowed on either side. |
The float property specifies that the element is floated to the left or right side, with the surrounding elements flowing around it. Table B.7 describes the values you can assign to this property.
| Value | Description |
| none | Displays the element where it is |
| left | Move to the left and wrap text around it |
| right | Move to the right and wrap text around it |
You set the total height of the element with the height property. You can set this property for text blocks or images. For example, you can use the height and width properties to create a special warning on the Web page that has a fixed size. Height is more useful with images, however. You can set this property to any length, a percentage value, or auto, which lets the browser determine the best size for the element.
You set the bottom margin by using the margin-bottom property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects such as hanging indents.
You set the left margin by using the margin-left property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.
You set the right margin by using the margin-right property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.
You set the top margin by using the margin-top property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.
The padding-bottom property specifies the amount of space to display between the element's bottom border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.
The padding-left property specifies the amount of space to display between the element's left border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.
The padding-right property specifies the amount of space to display between the element's right border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.
The padding-top property specifies the amount of space to display between the element's top border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.
You set the total width of the element with the width property. You can set this property for text blocks or images. You can set this property to any length, a percentage value, or auto, which lets the browser determine the best size for the element.
You use the list properties to specify how lists display in the browser window. You can change the position of the marker (list-style-position) and the style or image used for the marker (list-style-type and list-style-image). The sections that follow describe each property in more detail. Enjoy.
The list properties are inherited, so if you define a property for the <UL> tag, all its enclosed <LI> tags inherit those properties. These tags are only meaningful for HTML list tags.
You can group the list properties using list-style. You specify the marker type, marker image, and position, like this:
list-style: square URL(http://www.myserver.com/images/marker.gif) inside
You use the list-style-image property to specify an image that the browser will display as the marker for a list item. The property's only value is the URL, using the URL(address) format, of the image to use as the marker, like this:
list-style-image: url(http://www.myserver.com/images/marker.gif)
To affect all the items within a list, set this property for the list container, such as <UL> as opposed to the list item <LI>. You can override an individual list item, however, by setting this property in a single occurrence of the <LI> tag.
The list-style-position property determines the relative position of the marker. Table B.8 describes the possible values you can assign to this property.
| Value | Description |
| Inside | The list item's text wraps to the next line underneath the marker. |
| Outside | The list item's text wraps to the next line underneath the start of the text on the previous line (hanging indent). |
You use the list-style-type property to specify the type of marker the browser will display. Use this instead of a marker image. Table B.9 describes each of the possible values you can assign to this property.
| Value | Description |
| disc | Disc |
| circle | Circle |
| square | Square |
| decimal | Numbered (1, 2, 3, ...) |
| lower-roman | Lowercase roman numerals (i, ii, iii, ...) |
| upper-roman | Uppercase roman numerals (I, II, III, ...) |
| lower-alpha | Lowercase alphabet (a, b, c, ...) |
| upper-alpha | Uppercase alphabet (A, B, C, ...) |
| none | No markers |
The white-space property defines how the browser handles white space within the element. You can leave things alone and let the browser collapse all the white space, or you can specify that the browser treat white space as if you're within a <PRE> container. Table B.10 shows you the values you can assign to this property.
| Value | Description |
| normal | White space is collapsed. |
| pre | Handle white space like the <PRE> tag. |
| nowrap | Wrapping is only permitted with <BR>. |
You can group the font properties using font. You specify the weight, style, size, and family, as in the following example:
font: bold normal 12pt times, serif
font-family is a prioritized list of typefaces for the element. You can specify a single typeface or a list of alternatives, separated by commas, as in the following example:
font-family: Courier, Times, Serif
You can use a font name you expect to be on the user's computer, such as Courier or Helvetica, or you can use a generic font name. Table B.11 shows the generic font names and provides an example of a font that looks similar.
| Name | Similar to: |
| serif | Times New Roman |
| sans-serif | Arial |
| cursive | Script |
| fantasy | Comic |
| monospace | Courier New |
If you're using a font name that has multiple words, enclose the font name in quotes, as in the following example:
font-family: "Courier New", serif
font-size determines the size of the text in points (pt), inches (in), centimeters (cm), or pixels (px). You can also use a percentage, which is relative to the parent element's font size. You can also use one of the values shown in Table B.12.
| Value | Description |
| xx-small | 50 percent smaller than the x-small font |
| x-small | 50 percent smaller than the small font |
| small | 50 percent smaller than the medium font |
| medium | A medium-sized font, probably 10 points |
| large | 50 percent larger than the medium font |
| x-large | 50 percent larger than the large font |
| xx-large | 50 percent larger than the x-large font |
| larger | 50 percent larger than the parent element's font |
| smaller | 50 percent smaller than the parent element's font |
NOTE: The W3C recommendation that browser programs use a scaling factor of 50 percent is only a recommendation. Vendors are free to use any scaling factor that they want. Thus, the values in Table B.12 are only guidelines.
You can change the style of the font by using the font-style property. Table B.13 describes the possible values.
| Value | Description |
| normal | Selects a normal face |
| oblique | Selects an oblique face |
| italic | Selects an italic face |
You use the font-variant property to display text in small caps. Setting this property to normal causes the browser to display the text normally. Setting this property to small-caps causes the browser to display the text using small caps.
font-weight determines the thickness of the font. You can assign normal, bold, bolder, or lighter to this property. You can also use the series of numbers from 100, 200, ... 900 to this property, with each successive number representing a weight that is thicker than the previous number. For example, font-weight: 700 sets a thicker font weight than does font-weight: 400.
TIP: A font weight of 400 is roughly equivalent to a normal font weight.
Text properties give you complete control over how the browser displays an element's text. You can change its color, size, font, spacing, and so on. The sections that follow describe each text property you can set.
letter-spacing determines the spacing between each letter in a line of text. You can set this property to normal and let the browser worry about it, or you can set this property to any valid length, such as 1px.
You use the line-height property to set the leading for an element. An element's leading is the distance between the baselines of two text lines. You can use any valid length or a percentage (which is relative to the parent element's line-height property), or you can set this property to normal. Note that the spacing is added before each line, not after.
CAUTION: This setting doesn't work well on text lines that use multiple font sizes on the same line of text.
text-align defines how text is aligned in an element. You can set this property to any of the values shown in Table B.14.
| Value | Description |
| left | Text is left justified. |
| right | Text is right justified. |
| center | Text is centered within the element. |
| justify | Text is left and right justified. |
You can add special decorations, such as underlining, to an element by using the text- decoration property. Table B.15 describes the values you can assign to this property. You can combine these values, too.
| Value | Description |
| none | No decorations |
| underline | Underlined text |
| overline | Text with a line over it |
| line-through | Strikethrough |
| blink | Blinking text |
You use the text-indent property to indent the first line of an element's text. You can set this property to any valid length. For example, here's how to indent the <P> tag's text to the right by one inch:
P {text-indent: 1in}
TIP: You can create a hanging indent by setting a tag's style text-indent to a negative value and margin-left to a positive value.
text-transform specifies that the text should be changed according to the values in Table B.16.
| Value | Description |
| capitalize | Capitalizes first letter of each word |
| uppercase | Uppercases all letters in the element |
| lowercase | Lowercases all letters in the element |
| none | No transformation |
You use the vertical-align property to change the vertical position of the element's text within the element itself. You can use one of the keywords described in Table B.17.
| Value | Description |
| baseline | Aligns the baseline of the element with the baseline of the parent |
| middle | Aligns the middle of the element with the middle of the parent |
| sub | Subscripts the element |
| super | Superscripts the element |
| text-top | Aligns the top of the element with the top of the parent element's text |
| text-bottom | Aligns the bottom of the element with the bottom of the parent element's text |
| top | Aligns the top of the element with the tallest element on the line |
| bottom | Aligns the bottom of the element with the lowest element on the line |
word-spacing determines the spacing between each word in a line of text. You can set this property to normal and let the browser worry about it, or you can set this property to any valid length, such as 1px.
Internet Explorer 4.0, Netscape Communicator, and CSS1
Table B.18 describes the CSS1 properties that Internet Explorer 4.0 and Netscape Communicator support as of this writing. The first column is the name of the property. You see a check mark in the second column beside features that Internet Explorer 4.0 supports and an X beside features that it doesn't support. The third column is for Netscape Communicator.
| Property | IE 4.0 | NC |
| Background Properties | ||
| background | 3 | 3 |
| background-attachment | X | 3 |
| background-color | 3 | 3 |
| background-image | 3 | 3 |
| background-position | X | X |
| background-repeat | X | 3 |
| color | 3 | 3 |
| Box Properties | ||
| backgr | 3 | 3 |
| border | X | 3 |
| border-color | X | 3 |
| border-width | X | 3 |
| border-bottom | X | X |
| border-bottom-width | X | 3 |
| border-left | X | X |
| border-left-width | X | 3 |
| border-right | X | X |
| border-right-width | X | 3 |
| border-style | X | 3 |
| border-top | X | X |
| border-top-width | X | 3 |
| clear | X | 3 |
| float | X | 3 |
| height | 3 | 3 |
| margin | 3 | 3 |
| margin-bottom | X | 3 |
| margin-left | 3 | 3 |
| margin-right | 3 | 3 |
| margin-top | X | 3 |
| padding | X | 3 |
| padding-bottom | X | 3 |
| padding-left | X | X |
| padding-right | X | 3 |
| padding-top | X | 3 |
| width | 3 | 3 |
| Classification Properties | ||
| list-style-image | X | 3 |
| list-style-position | X | 3 |
| list-style-type | X | 3 |
| white-space | X | 3 |
| Font Properties | ||
| font | 3 | 3 |
| font-family | 3 | 3 |
| font-size | 3 | 3 |
| font-style | 3 | 3 |
| font-variant | 3 | X |
| font-weight | 3 | 3 |
| Text Properties | ||
| letter-spacing | 3 | X |
| line-height | 3 | 3 |
| text-align | 3 | 3 |
| text-decoration | 3 | 3 |
| text-indent | 3 | 3 |
| text-transform | 3 | 3 |
| vertical-align | 3 | X |
| word-spacing | X | X |
© Copyright, Macmillan Computer Publishing. All rights reserved.