cascading style sheets tutorial

Element Type

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

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
What it does

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 advanced style sheets section.

Possible Values

In addition to the three types of element above, CSS let's you specify a display type of none.

The display property takes one of four keyword values, none, block, inline and list-item.

A value of block, inline or list-item means that the element will have the specified display type.

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.

Default Values

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

Is it inherited?

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

Hints and suggestions

Browsers are permitted to ignore the display property, and some major browsers do so at this stage.s

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 should not affect the appearance of a web page, rather, browsers should ignore returns and tabs, and collapse more than one space to a single space for display purposes. With the whit-space property, you can specify how the browser in fact handles the whitespace.

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 appear in the element. This is the equivalent to the HTML tag <PRE>. Essentially, the element is treated as being preformatted.

A nowrap white-space 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 no wrap to a new line simply because the line does not fit in the page horizontally.

Default Values

If not 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 bullet point (if any) is associated with a list item.

Possible Values

The list-item-type takes one of the following keyword values:

specifies that there should be no bullet beside list items

specify three different kinds of list item bullet

specify different numbering systems for ordered list elements.

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

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

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-item-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 line 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 and 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 specifications

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

are equivalent to the single

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

Default Values

for the default values of each list-type 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.