Structure: Using CSS to structure HTML documents

There are four list properties that provide control over the appearance of regular and nested lists

By default, a list has a box containing the list items with the label (the list markers) outside and to the left of the box

list-style-type

This property affects the list's labels and their appearance with nine options

• disc: This is the default
• circle: circle
• square: square
• decimal: a number
• lower-roman: lower case roman numerals
• upper-roman: Upper case roman numerals
• lower-alpha: lower case
• upper-alpha: uppercase
• none: This prevents the label from being displayed

To set the main list's labels to squares and the first nested list's labels to discs, set the list-style-type rules as follows:

Remember that multiple selectors are listed with a space and no comma

list-style-image

This property allows you to use an image as a label (it should be a small image)

You do this with the following markup:

ul { list-style-image: URL("http://terminator.gif") }

Note that the declaration is separated from the value (URL) by a colon

And it looks like this:

• Now here's a really

• useful type of effect

• doncha think?

Note: This is not supported by Netscape 4 but you can see it the most current browsers

To make sure that something happens, you can place a default list-style-type in the rule to make sure that you still get the effect you want

In this case, the label value is added after the image and the declaration list-style is used:

ul { list-style: URL("http://terminator.gif") disc }

list-style-position

This property allows you to place the label inside or outside the list's box

It has two values:

• inside: this places the label inside the box aligned with the first line of text
• this is the default

Since the default is familiar, here's the rule to place labels inside the box:

And it looks like this:

• The alignment looks different when the label is on the inside of the box, doesn't it?
• It means that this type of list will take up less screen real estate than the usual list, giving you a little more control over layout
• So, is class over yet? I'm tired and this guy is just a little bit BORING!!!

Again, this is not supported by Netscape 4 but you can see it with the most ciurrent browsers

list-style

This is the property that allows you to string multiple declaration and values together into a single rule

You can set the label and the position using values for:

• list-style-type
• list-style-image
• list-style-position

For example:

ul { list-style: URL("http://terminator.gif") circle inside }

white space

This property gives you control over tabs, line breaks (newlines), and regular white space on the page

It has three values:

• normal: this the default setting where the browser will ignore extraneous white space that you leave in the marked up document (tabs, line breaks, extra spaces)

  The browser will lay out the page deleting the extraneous spaces at the beginning and end of paragraphs and collapsing extra spaces between letters and words into a single spacecircle

• pre: this causes the browser to retain all extraneous white space

Newlines will become linebeaks and tabs are allotted a number of spaces between 1-8 so that the last space of the tab is on a column which is a multiple of 8

Monospaced fonts will remain aligned, proportional fonts will not

This value also overrides justification

• nowrap: this value will collapse white space but will not break lines

Here is the rule for paragraph that will preserve the white space (so the way it is displayed is the way in looks as raw html:

p.wpre { white-space: pre }

And here is the paragraph:

There are a number of tabs that have been placed in the paragraph and some lines have been skipped to provide a nice, messy look. There are also line breaks and other stuff

Here's the rule that returns things to normal:

p.wnorm { white-space: normal }

And here's the paragraph again

There are a number of tabs that have been placed in the paragraph and some lines have been skipped to provide a nice, messy look. There are also line breaks and other stuff

The tabs spaces, and skipped lines have been eliminated and collapsed by the use of the "normal" value

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssstructure.html
Last updated 3.15.06 - H. Rosenbaum