Authors: Chuck Musciano Bill Kennedy

HTML The Definitive Guide (96 page)

BOOK: HTML The Definitive Guide

12.02Mb size Format: txt, pdf, ePub

Read Book Download Book

ads

P {padding-left: 0.5cm}

IMG {padding-left: 10%}

The first example creates half a centimeter of padding between the contents of the

tag and its left border. The last example creates padding to the left of the tag equal to 10 percent of the parent element's width.

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. The
padding property is not supported by Netscape 4.

9.3.6.12 The width 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 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 height property, 9.3.6.9]

The width property interacts with the margin-left and margin-right properties to determine the
total width of an element, as described in section Section 9.3.6.1.

9.3.7 List Properties

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.

9.3.7.1 The list-style-image property

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 section Section 9.3.7.3, "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 supported only by Internet Explorer 4.

9.3.7.2 The list-style-position property
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: This is a bulleted list with an "outside" marker ●

The value inside causes the marker to be drawn with the list item flowing around it, much like a floating image:

This is a bulleted list with an "inside" marker ●

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.

9.3.7.3 The list-style-type property

The list-style-type property serves double-duty in a sense, determining how both ordered and unordered list items are rendered by a styles-conscious browser. This property has the same effect on a list item as its type
attribute does. [The type attribute, 8.3.1.1]

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.

9.3.7.4 The list-style property

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 they are 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.

9.3.7.5 Using list properties effectively
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

tag. [The display property, 9.3.8.1]

This shouldn't deter you from using these properties elsewhere, particularly with the

Since these properties are inherited by elements whose parents have them set, modifying a list property for the

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
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:
1. Item one
2. Item two
3. And so forth
Having to repeat the class name is tedious and error-prone. A better solution is to define a class of the
1. tag within the list will inherit the property and use lowercase Roman numerals:
  1. Item one
  2. Item two
  3. And so forth
  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
  1. tag in the list.
    You can use these properties in a much more global sense as well. Setting a list property on the tag will change the appearance of all lists in the document; setting it on a
    tag will change all the lists within that division.
    9.3.8 Classification Properties
    Classification properties are the most esoteric of the CSS style properties. They do not directly control how a styles-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 effect. Even then, it is unlikely that the property will be supported by most browsers.
    9.3.8.1 The 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
  2. 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.
    Netscape 4 fully supports this property; Internet Explorer 4 supports only the block and none values.
    9.3.8.2 The whitespace property
    The whitespace property defines how the styles-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
```
 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 
 tags.
Like the display property, the whitespace property is rarely used for good instead of evil. Don't change how elements handle whitespace without having a compelling reason for doing so.
        
```