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:
CSS 2 introduced a number of new properties which control how tables and their captions are drawn.
display
Browser support
Get browser support information for display in the downloadable version of this guide or our browser support tables.
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
Browser support
Get browser support information for white-space in the downloadable version of this guide or our browser support tables.
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
Browser support
Get browser support information for list-style-type in the downloadable version of this guide or our browser support tables.
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
orlower-alpha
(lowercase ascii letters [a, b, c, ... z])upper-latin
orupper-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
Browser support
Get browser support information for list-style-image in the downloadable version of this guide or our browser support tables.
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
Browser support
Get browser support information for list-style in the downloadable version of this guide or our browser support tables.
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
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
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
Browser support
Get browser support information for border-collapse in the downloadable version of this guide or our browser support tables.
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
Browser support
Get browser support information for border-spacing in the downloadable version of this guide or our browser support tables.
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
Browser support
Get browser support information for caption-side in the downloadable version of this guide or our browser support tables.
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 cellshide
- 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
Browser support
Get browser support information for table-layout in the downloadable version of this guide or our browser support tables.
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.