complete css guide

Element type properties

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. By default, all elements are one of these types. For example, a paragraph is a block element, while a link is an inline element. With CSS, your style sheet can redefine the display type of an element. So, if you wish, you can make a paragraph display as an inline element, or link display as a block.

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:

• display
• white-space
• list-style-type
• list-style-image
• list-style-position
• list-style

CSS 2 introduced a number of new properties which control how tables and their captions are drawn.

• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout

display

What it does

The display property determines how an element will be drawn on the page. We discuss the basic ways an element can be drawn (block, inline and list-item) more fully in the Type Selector section. There are also a number of more complex values that essentially mean you can make any element display as if it were one of the elements associated with tables.

Possible values

The display property takes one of several keyword values, the core of which are

• none
• block
• inline
• list-item
• inline-block
• run-in

A value of block, inline or list-item mean that the element will have the specified display type, regardless of the kind of default display 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. The value inline-block is a little bit different. It means that an element will be drawn as a block box, but this box is flowed as if it were inline. So it will end up looking like a replaced element, for example an image. The run-in value creates either block or inline boxes, depending on context. Then, properties will apply to run-in boxes depending on whether their final status is inline or block.

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.

CSS 2 introduced several new values for display related to tables. In CSS 2 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. The table related values for display are

• 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)
• 'table-cell' - a 'table-cell' is the rectangular object to be arranged in the table grid. Table cells are only allowed inside rows. (HTML analog: 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)

Default values

While the theoretical default value of display is inline, 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.

Is it inherited?

An element does not inherit the display value of its parent.

Hints and suggestions

Note that browsers are permitted to ignore the display property.

white-space

What it does

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.

Possible values

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.

Default values

If no white-space value is specified, the white-space of an element is normal.

Is it inherited?

An element does inherit the white-space value of its parent element.

list-style-type

What it does

The list-style-type property lets you determine what marker (or bullet point) if any is associated with a list item.

Possible values

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)

Default values

If no list-style-type value is specified, a list item has a list-style-type of disc.

Is it inherited?

A list item inherits the list-style-type value of its parent.

Hints and suggestions

Note - only elements with a display property value of list-item can have list-style-type properties.

list-style-image

What it does

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.

Possible values

A list-style-image can be specified as either a URL, or by the keyword none. Our section on values details URL values.

Default values

If no list-style-image value is set, an element has a list-style-image of none.

Is it inherited?

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.

Hints and suggestions

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.

list-style-position

What it does

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

Possible values

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.

Default values

If no list-style-position is specified, the position is outside.

Is it inherited?

An element inherits the list-style-position of its parent.

Hints and suggestions

Remember, as with other list-style properties, list-style-position only applies to elements with a display value of list-item.

list-style

What it does

list-style is a shorthand property that allows you to specify and set all list style property values with one property.

Possible values

Any of the values that are possible for the list style properties in this part are permissible for list-style.

For example, the following

is equivalent to the single

list-style: disc url(../gifs/bullet.gif) inside

Default values

For the default values of each list style property, see the individual properties above.

Is it inherited?

Each list-style property is inherited from its parent element.

Hints and suggestions

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.

border-collapse

What it does

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.

Possible values

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.

Default values

If no border-collapse is specified, it is treated as being separate.

Is it inherited?

An element does not inherit the border-collapse of its parent.

Hints and suggestions

See our Tables and CSS section for more on implementing this property in conjunction with other table properties.

border-spacing

What it does

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.

Possible values

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.

Default values

If no border-spacing is specified, the initial value is 0.

Is it inherited?

An element does inherit the border-spacing of its parent.

Hints and suggestions

See our Tables and CSS section for more on implementing this property in conjunction with other table properties.

caption-side

What it does

When you create an HTML table you should provide a label for this table using the <caption> element. This element should be placed inside the <table> element, immediately after the start tag. This way, non-visual user agents will have no doubt about the nature of the table's content. But obviously there's nothing here about where the caption should actually be drawn by visual user agents, such as browsers. The caption-side property then allows you to specify where this table caption should be drawn, with respect to the table itself. Note though that the <caption> element always remains an inline element, inheriting (inheritable) characteristics of the table which contains it.

Possible values

The caption-side property can take the following values, the effects of which should be pretty self explanatory.

• top
• bottom

Default values

The default value for this property is top - so if you simply place a <caption> element inside your <table>, and don't specify a caption-side property in the style sheet, the caption will be drawn as a block element above the table.

Is it inherited?

The caption-side property is inherited.

empty-cells

What it does

The empty-cells property can be applied to a <td> elements when their containing table has the property border-collapse: separate applied to it. empty-cells allows you to specify whether borders and backgrounds will be drawn for cells which have no visible content. This includes

• empty cells
• cells with visibility: hidden

Possible values

empty-cells can take the following values.

• show - borders will be drawn around empty cells
• hide - no borders will be drawn around empty cells

Default values

If no empty-cells is specified, the initial value is show.

Is it inherited?

An element does inherit the empty-cells of its parent.

table-layout

What it does

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.

Possible values

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.

Default values

If no table-layout is specified, it is treated as being auto.

Is it inherited?

An element does not inherit the table-layout of its parent.

© 1997- western civilisation pty. ltd. Contact Us Search Site