cascading style sheet tutorial and example concerning html lists
cascading style sheets and html lists
html list properties can be altered in a number of ways with stylesheets in the example below the value of white-space is set to normal which makes multiple spaces collapse into just one, other values that could be attributed to white-space are 'pre' which does not collapse multiple spaces and 'nowrap' which does not allow line wrapping without a <BR> tag.
LI {
white-space: normal;
list-style: square;
}
the stylesheet also affects the value of the list-style, giving each list item a square style
each list item
starts with a square
other list-styles include disc, circle, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none
circle (this for example)
disc (this for example)
decimal (numbers, like an ordered list, 1 2 3 4 5)
lower-roman (lower case roman numerals, i ii iii iv v)
upper-roman (upper case roman numerals, I II III IV V)
lower-alpha (lower case, a b c d e)
upper-alpha (upper case, A B C D E)
none, it's gone
list-style is shorthand for list-style-type (discussed above), list-style-position and list-style-image
list-style-position, which determines where the next line of text starts if there is a line break in a list item, can be set to 'inside' or 'outside'
inside
outside
° first list item second line of item
°
first list item second line of item
list-style is shorthand for list-style-image. An image can easily be used for the list style instead of a circle, disc, square etc...
LI {
list-style-image: url(disc.gif)
}
first list item
second list item
third list item
since list-style is shorthand, the properties of list-style-type, list-style-position and list-style-image can be written out in one line
LI { list-style: square outside url(disc.gif)}
the list image seems to work in netscape occasionally and in general stylesheets are more reliable in netscape when applied to a <ul> tag rather than an <li> tag
another css value for html lists is 'display', which has four values and is included here for the sake of completeness but it is recommended that 'display' is not used
block (a line break before and after the element)
inline (no line break before and after the element)
list-item (same as block except a list-item marker is added)
first list item
