The Slacker's Guide to Cascading Style Sheets

The classification properties in CSS are very helpful. Some of these properties are display, white-space, and list-style-type, list-style-image, list-style-position, and -style. Now I will discuss each property individually:

Display

The display property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.)

An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, 'LI' will typically have this value.

An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.

A value of 'none' turns off the display of the element, including children elements and the surrounding box.

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none }
The last rule turns off the display of images.
The initial value of 'display' is 'block'.

White-Space

This property declares how whitespace inside the element is handled: the 'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the 'PRE' element in HTML) or as 'nowrap' (where wrapping is done only through BR elements).

PRE { white-space: pre } P { white-space: normal }
The three values for this property can be 'normal', 'pre', and 'nowrap'. The default value is 'normal', and this property can be applied to all block-level elements.

List-Style-Type

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL { list-style-type: lower-alpha } /* a b c d e etc. */ OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
There are many different values for this property, and they include 'disc', 'circle', 'square', 'decimal', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha', and 'none'.

List-Style-Image

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.
UL { list-style-image: url(http://www.yahoo.com/image.jpg) }
The value can be either a URL or the value 'none'.

List-Style-Position

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content.

Check out this extra info to clarify the idea of list-style-position:

Elements with a 'display' property value of 'list-item' are formatted as block-level elements, but preceded by a list-item marker. The type of marker is determined by the 'list-style' property. The marker is placed according to the value of the 'list-style' property:

<STYLE TYPE="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL CLASS=COMPACT> <LI>first list item comes first <LI>second list item comes second </UL> The above example may be formatted as:

* first list item comes first * second list item comes second * first list item comes first * second list item comes second

In right-to-left text, the markers would have been on the right side of the box.

The value can be 'inside' or 'outside'.

List-Style

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

UL { list-style: upper-roman inside } UL UL { list-style: circle outside } LI.square { list-style: square }
A URL value can be combined with any other value:

UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.

{ Intro | Selectors | Properties | Values }