| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
 |
 |
 |
 |
If you have delved deeply into HTML, you will know that there are a number of different types of element. The main types are inline, block and list item elements. By default, various elements are one of these types. For example, a paragraph is a block element, while a link <a> is an inline element. With CSS, your style sheet can redefine the display type of an element. You can make a paragraph an inline element if you wish (though why you would, on the other hand is not entirely clear).
In addition, you can specify the display properties for different types of element. For example you can set the type of bullet for a list item.
The element type properties are:
CSS2 adds new values for display, to enable any element to be specified as a table or part of a table (for instance a cell). It also introduces four new table related properties
The display property determines the display type of an element. HTML defines three main types of display item, block, inline and list-item. We discuss these more fully in the HTML Element Selector section.
CSS2 introduced several new values related to tables. In CSS2 any element (say a paragraph) can be a table or part of a table. With HTML this may not make much sense (as there is already the <table> element, table columns, cells, etc.) However, other languages, such as XML, do not have such elements. In those languages, CSS tables become absolutely necessary for displaying tabular data.
CSS2 also introduced new display types marker, run-in and compact.
The display property takes one of several keyword values, the core of which are
none
block
inline
list-item
A value of block, inline or list-item means that the element will have the specified display type, regardless of the kind of display type that the HTML specification gives this kind of element. As we saw above, this means we can make a paragraph an inline element, or a link a block element.
A value of none means that the element will not be visible, nor will it have any effect on the layout of the page. Essentially it is not there. Compare this with the visibility property, where an element is not visible, but is taken into account by the browser when it is laying out the page.
CSS2 also added three new display types
marker
compact
run-in
marker specifies that content generated by a :before or :after selectors should be markers (like those used with list items.)
Values of compact and run-in are also used in conjunction with :before and :after selectors. They give rise to relatively complex considerations, as described in the CSS2 recommendation.
The following cases can occur:
run-in or compact element has a :before pseudo-element of type inline: the pseudo-element is taken into account when the size of the element's box is computed (for compact) and is rendered inside the same block box as the element.
run-in or compact element has an :after pseudo-element of type inline: The rules of the previous point apply.
run-in or compact element has a :before pseudo-element of type block: the pseudo-element is formatted as a block above the element, and does not take part in the computation of the element's size (for compact).
run-in or compact element has an :after pseudo-element of type block: both the element and its :after pseudo-element are formatted as block boxes. The element is not formatted as an inline box in its own :after pseudo-element.
run-in or compact element has a :before of type block: the decision how to format the run-in/compact element is made with respect to the block box resulting from the :before pseudo-element.
run-in or compact element has a :before pseudo element of type inline: the decision how to format the run-in/compact element depends on the display value of the element to which the is attached.
CSS2 as mentioned above introduces many new values associated with tables. In addition to the above display types, CSS2 allows you to specify that an element is any of the following
table - a 'table' is the outer container for all tables. It defines a rectangular block element that contains any number of row groups, rows, column groups, columns, and/or captions, all arranged in an irregular grid pattern. Any rendering objects other than these should be displayed outside the rectangular grid. (HTML analog: table)
inline-table - an 'inline-table' is identical to a 'table' element, except that it is treated as an inline replaced element in the context surrounding the 'inline-table' element.
table-column-group - a 'table-column-group' is a container for a number of table columns. This allows the designer to set presentation properties on a group of columns, for example by placing borders around a group of columns. (HTML analog: colgroup)
table-column - a 'table-column' is a grouping of all cells in a particular vertical column. (HTML analog: col)
table-row-group - a 'table-row-group' is a container for a number of table rows. This allows the designer to set presentation properties on a group of rows, for example by placing borders around a group of rows. (HTML analog: tbody)
table-header-group - A 'table-header-group' is a special type of 'table-row-group' that is always displayed at the top of the table, above all other rows and row-groups, but below any captions. (HTML analog: thead)
table-footer-group - A 'table-footer-group' is a special type of 'table-row-group' that is always displayed at the bottom of the table, below all other rows and row-groups, but above any captions. (HTML analog: tfoot)
table-row - a 'table-row' groups all cells in a particular horizontal row. (HTML analog: tr)
td)
table-caption - a 'table-caption' is a special type of table cell that appears as a row or column of its own in a table. (HTML analog: caption)
While the theoretical default value of display is block, browsers essentially treat an element as having the recommended display type if no display type is specified. These recommendations are part of the HTML specification.
An element does not inherit the display value of its parent.
Note that browsers are permitted to ignore the display property.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | P | P | P | P | P | P | P | P | P | N |
Internet Explorer 4.0x Windows and Macintosh and 4.5 Macintosh the only value supported was display: noneInternet Explorer 5.0 Macintosh improved this considerably by also supporting block, inline and list-item. It does not support marker, compact or run-in. Its support for the values associated with tables is both patchy and at times quite buggy: best avoided.Explorer 5 and 5.5 for Windows supports all non-table values for display except list-item.Opera 3.6 for Windows supports all non-table values for display except list-item.Opera 5.0 supports all non-table values for display. Of the values associated with tables it supports table, inline-table, table-row, table-cell and table-caption.Navigator 4.x only supports display: none.Netscape 6.0 doesn't support compact or run-in, but it does support all the other non-table values. Of the values associated with tables it has very good support. The only thing it doesn't support is the value inline-table. |
|||||||||||
The white-space property applies only to block elements, and specifies what should be done by the browser with extraneous whitespace (tabs, returns, extra spaces and so on). Whitespace characters in HTML should not affect the appearance of a web page, rather, browsers should ignore returns and tabs, and collapse more than one whitespace character to a single space for display purposes. With the white-space property, you can specify how the browser in fact handles whitespace characters.
The white-space property can take one of the following keyword value: normal, pre, and nowrap.
A white-space of normal means that whitespace will be handled in the traditional manner. Any tabs, returns and extraneous spacing will be ignored.
A white-space of pre keeps all whitespace as it appears in the element. This is the equivalent to the HTML element <pre>. Essentially, the element is treated as being preformatted.
A whitespace of nowrap means that the contents of the element will only wrap (break to a new line) when an explicit line break - <br>- is in the contents. The content of the element will not wrap to a new line simply because the line does not fit in the page horizontally.
If no white-space value is specified, the white-space of an element is normal.
An element does inherit the white-space value of its parent element.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | P | P | Y | N | N | Y | P | Y | N | Y | N |
Netscape Navigator 4.x does not support the value no-wrap.Internet Explorer 4.0x Macintosh and Windows and 4.5 Macintosh, and WebTV do not support the values pre or no-wrap.Explorer 5 and 5.5 for Windows support pre and no-wrap, but not on inline elements. |
|||||||||||
The list-style-type property lets you determine what marker (or bullet point) if any is associated with a list item.
The list-style-type takes one of the following keyword values:
none
specifies that there should be no bullet beside list items
disc
circle
square
specify three different kinds of list item bullet.
There are also numerous different numbering systems for ordered list items.
Simple
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
Advanced
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
The CSS2 specification specifies these different numbering systems as follows
decimal (decimal numbers, beginning with 1)
decimal-leading-zero (decimal numbers padded by initial zeros [e.g., 01, 02, 03, ..., 98, 99])
lower-roman (lowercase roman numerals [i, ii, iii, iv, v, etc.])
upper-roman (uppercase roman numerals [I, II, III, IV, V, etc.])
hebrew (traditional Hebrew numbering)
georgian (traditional Georgian numbering [an, ban, gan, ..., he, tan, in, in-an, ...])
armenian (traditional Armenian numbering)
cjk-ideographic (plain ideographic numbers)
hiragana (a, i, u, e, o, ka, ki, ...)
katakana (A, I, U, E, O, KA, KI, ...)
hiragana-iroha (i, ro, ha, ni, ho, he, to, ...)
katakana-iroha (I, RO, HA, NI, HO, HE, TO, ...)
Alphabetic systems are specified with:
lower-latin or lower-alpha (lowercase ascii letters [a, b, c, ... z])
upper-latin or upper-alpha (uppercase ascii letters [A, B, C, ... Z])
lower-greek (lowercase classical Greek alpha, beta, gamma, ... [έ, ή,ί, ...] - the characters in the preceding brackets may not display correctly)
If no list-style-type value is specified, a list item has a list-style-type of disc.
A list item inherits the list-style-type value of its parent.
Note - only elements with a display property value of list-item can have list-style-type properties.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | P | P | P | P | P | B | B | P | P | N |
Netscape Navigator 4.0x and 4.5 Macintosh displays a value of none as a ?, rather than no marker at all.Netscape 6 supports all the simple values, but none of the more advanced ones. Unfortunately if it doesn't support a value it uses a question mark instead. Internet Explorer 5.0 Macintosh supports all of the simple values except decimal-leading-zero, lower-latin, upper-latin and lower-greek. It supports none of the advanced values. If it doesn't support a value it uses the value of decimal instead.Opera 5.0 supports all of the simple values except decimal-leading-zero (uses decimal instead) and lower-greek (uses a question mark). It doesn't support any of the advanced values, using decimal instead.WebTV displays all unordered lists with discs, and all ordered lists with numerical markers. |
|||||||||||
CSS lets you specify an image by URL as the marker (bullet point) for a list item. list-style-image specifies this image by URL.
A list-style-image can be specified as either a URL, or by the keyword none. Our section on values details URL values.
If no list-style-image value is set, an element has a list-style-image of none.
An element does inherit the list-style-image of its parent. To stop an element inheriting the list-style-image of its parent, set its list-style-image to none.
As with other list style properties, only elements with a display value of list-item (explicitly set, or as recommended) may have a list-style-image value.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N |
Netscape 4.x and WebTV do not support list-style-image. List items are drawn with discs. |
|||||||||||
Lists can be drawn either with the contents of the element wholly indented (this is a list-style-position of outside), or with only the first line indented, and subsequent lines with the same left alignment as the marker (a list-style-position of inside).
list-style-position can be specified as either of two keywords, inside and outside.
A position of inside makes the second and subsequent lines of a list item left aligned with the marker, not the left of the first line of text.
A position of outside is the traditional way for list items to be aligned. The text on second and subsequent lines aligns with the left of the text on the first line.
If no list-style-position is specified, the position is outside.
An element inherits the list-style-position of its parent.
Remember, as with other list-style properties, list-style-position only applies to elements with a display value of list-item.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N |
Netscape 4.0x and 4.5+ as well as WebTV do not support list-style-position. Lists are always drawn in the outside position. |
|||||||||||
list-style is a shorthand property that allows you to specify and set all list style property values with one property.
Any of the values that are possible for the list style properties in this part are permissible for list-style.
For example, the following
list-style-type: disc
list-style-image: url(../gifs/bullet.gif)
list-style-position: inside
is equivalent to the single
list-style: disc url(../gifs/bullet.gif) inside
For the default values of each list style property, see the individual properties above.
Each list-style property is inherited from its parent element.
As with all list style properties, the list-style shorthand applies only to elements with a display value of list-item or which are part specified of the HTML recommendation as list items.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
The list-style shorthand is supported by all browsers except WebTV, with the errors and omissions which apply to specific list properties on this page. |
|||||||||||
There are two possible ways in which a browser can determine how to layout a table. The first is to ignore any content, and simply used the widths and heights specified for rows, cells and columns.
The second, which is much slower, is to recalculate the row and column and cell sizes based on their content. This can take numerous 'passes' through the content to fully calculate the table layout. This is how browsers usually draw HTML tables.
The table-layout property enables the specification of which of these approaches is taken to laying out a table.
table-layout takes one of two values: auto and fixed.
fixed specifies that the table should be drawn using the first model described above.
auto specifies that the second model should be used.
If no table-layout is specified, it is treated as being auto.
An element does not inherit the table-layout of its parent.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | Y | Y | N | N | N | N | Y | N | B | N |
| Netscape 6.0 has the best support for this property, Opera 5.0 is patchy at best, Internet Explorer 5.0 Macintosh does not support it at all. | |||||||||||
border-collapse applies only to elements which have a display value of either table or inline-table. This means they must either be <table> elements or elements with a display property set to the value table or inline-table.
There are two common models of table border behavior. border-collapse specifies how adjacent borders are drawn in a table.
In one model adjacent borders of table elements collapse into a single border. This will be familiar from most word processing applications.
In the other common model borders are drawn for each cell, and cell spacing separates the borders. This is how table borders are drawn by default in HTML.
border-collapse takes one of two values: collapse and separate.
collapse specifies that the table should be drawn using the first model described above.
separate specifies that the second model should be used.
If no border-collapse is specified, it is treated as being separate.
An element does not inherit the border-collapse of its parent.
See our Tables and CSS section for more on implementing this property in conjunction with other table properties.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | Y | Y | N | N | N | N | N | N | B | N |
Unfortunately this very useful property is not well-supported. It can work well in Opera 5 on simple tables, but can also cause the borders to be drawn strangely on tables that make use of the rowspan and colspan attributes. |
|||||||||||
border-spacing applies only to elements which have a display value of either table or inline-table. This means they must either be <table> elements or elements with a display property set to the value table or inline-table.
This property specifies the spacing between adjacent cells of the table.
border-spacing can take either a single length value or a pair of length values.
A single length value specifies the same spacing between each edge of each adjacent cell in a table.
With two length values, the first specifies the horizontal spacing between adjacent cells, while the second specifies the vertical spacing between adjacent cells.
If no border-spacing is specified, the initial value is 0.
An element does inherit the border-spacing of its parent.
See our Tables and CSS section for more on implementing this property in conjunction with other table properties.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | N | N | N | N | N | N | Y | N | Y | N |
| This property works very well in Netscape 6.0 and Opera 5.0, but unfortunately not in Internet Explorer 5.0 Macintosh, where it has no effect at all. | |||||||||||
| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
|
|
|
|