Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
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}
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
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
For example, suppose you want to create a list style that uses lowercase Roman numerals. One way is to define a class of the
Within your list, you'll need to specify each list element using that class:
Having to repeat the class name is tedious and error-prone. A better solution is to define a class of the
Any
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
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 a9.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
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.