Полезная информация


Special Edition Using HTML 4

Previous chapterNext chapterContents


- B -
Style Sheet Property Reference

by Jerry Honeycutt

Background Properties

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

background-attachment

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.

Table B.1  background-attachment Values

Value Description
fixed The image is fixed within the browser window.
scroll The image scrolls as the user scrolls the window.

background-color

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.

background-image

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.

background-position

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

Table B.2  background-position Positions

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.

background-repeat

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.

Table B.3  background-repeat Values

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

color

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

Box Properties

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.

border-bottom-width

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.

Table B.4  border-bottom-width Values

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).

border-color

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.

border-left-width

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.

border-right-width

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.

border-style

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.

Table B.5  border-style Values

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.

border-top-width

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.

clear

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.

Table B.6  clear Values

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.

float

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.

Table B.7  float Values

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

height

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.

margin-bottom

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.

margin-left

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.

margin-right

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.

margin-top

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.

padding-bottom

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.

padding-left

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.

padding-right

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.

padding-top

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.

width

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.

Classification Properties

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

list-style-image

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.

list-style-position

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.

Table B.8  list-style-position Values

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).

list-style-type

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.

Table B.9  list-style-type Values

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

white-space

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.

Table B.10  white-space Values

Value Description
normal White space is collapsed.
pre Handle white space like the <PRE> tag.
nowrap Wrapping is only permitted with <BR>.

Font Properties

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

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.

Table B.11  Generic Fonts

Name Similar to:
serif Times New Roman
sans-serif Arial
cursive Script
fantasy Comic
monospace Courier New
In case the user doesn't have the font you've requested, always use a generic font name as the last item in the list. In the previous example, serif is the last font in the list. If the user doesn't have courier or times, the browser will use the generic font instead.

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

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.

Table B.12  font-size Values

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.

font-style

You can change the style of the font by using the font-style property. Table B.13 describes the possible values.

Table B.13  font-style Values

Value Description
normal Selects a normal face
oblique Selects an oblique face
italic Selects an italic face

font-variant

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

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

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

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.

line-height

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

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.

Table B.14  text-align Values

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.

text-decoration

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.

Table B.15  text-decoration Values

Value Description
none No decorations
underline Underlined text
overline Text with a line over it
line-through Strikethrough
blink Blinking text

text-indent

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

text-transform specifies that the text should be changed according to the values in Table B.16.

Table B.16  text-transform Values

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

vertical-align

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.

Table B.17  vertical-align Values

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

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.

Table B.18  CSS1 Property Support

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


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.