Lecture 18: CSS List Styling

Overview:

  1. list-style-type Property
  2. list-style-position Property
  3. list-style-image Property
  4. list-style Shorthand Property
  5. List Numbering

list-style-type Property

Property Usage and Effect Values Accepted Recommendations
list-style-type Specifies the type of unordered or ordered list to display. Mouse over the value for details:

Unordered lists:
disc | circle | square

Ordered lists:
decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha

Both types of lists: none		 Using the 'list-style' shorthand is sufficient for conveying this information, so 'list-style-type' is not necessary.

If list effects are not displaying properly, try changing 'ul' to 'ul li' (and the same with 'ol' to 'ol li')

Not all browsers will support all values (IE lacks support for many of these; Gecko-based browsers offer excellent support), so testing cross-browser and cross-platform is recommended.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Embedded CSS: List-Style-Type</title>
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .disc {list-style-type: disc;}
    .circle {list-style-type: circle;}
    .square {list-style-type: square;}
    .decimal {list-style-type: decimal;}
    .decimal-leading-zero {list-style-type: decimal-leading-zero;}
    .lower-roman {list-style-type: lower-roman;}
    .upper-roman {list-style-type: upper-roman;}
    .lower-alpha {list-style-type: lower-alpha;}
    .upper-alpha {list-style-type: upper-alpha;}
    .lower-greek {list-style-type: lower-greek;}
    .lower-latin {list-style-type: lower-latin;}
    .upper-latin {list-style-type: upper-latin;}
    .hebrew {list-style-type: hebrew;}
    .armenian {list-style-type: armenian;}
    .georgian {list-style-type: georgian;}
    .cjk-ideographic {list-style-type: cjk-ideographic;}
    .hiragana {list-style-type: hiragana;}
    .katakana {list-style-type: katakana;}
    .hiragana-iroha {list-style-type: hiragana-iroha;}
    .katakana-iroha {list-style-type: katakana-iroha;}
    .none {list-style-type: none;}
    --></style>
</head>
<body>
<ul class="disc">
    <li>Disc list item</li>
    <li>Disc list item</li>
    <li>Disc list item</li>
</ul>
<ul class="circle">
    <li>Circle list item</li>
    <li>Circle list item</li>
    <li>Circle list item</li>
</ul>
<ul class="square">
    <li>Square list item</li>
    <li>Square list item</li>
    <li>Square list item</li>
</ul>
<ol class="decimal">
    <li>Decimal list item</li>
    <li>Decimal list item</li>
    <li>Decimal list item</li>
</ol>
<ol class="decimal-leading-zero">
    <li>Decimal with leading zero list item</li>
    <li>Decimal with leading zero list item</li>
    <li>Decimal with leading zero list item</li>
</ol>
<ol class="lower-roman">
    <li>Lower roman list item</li>
    <li>Lower roman list item</li>
    <li>Lower roman list item</li>
</ol>
<ol class="upper-roman">
    <li>Upper roman list item</li>
    <li>Upper roman list item</li>
    <li>Upper roman list item</li>
</ol>
<ol class="lower-alpha">
    <li>Lower alpha list item</li>
    <li>Lower alpha list item</li>
    <li>Lower alpha list item</li>
</ol>
<ol class="upper-alpha">
    <li>Upper alpha list item</li>
    <li>Upper alpha list item</li>
    <li>Upper alpha list item</li>
</ol>
<ol class="lower-latin">
    <li>Lower latin list item</li>
    <li>Lower latin list item</li>
    <li>Lower latin list item</li>
</ol>
<ol class="upper-latin">
    <li>Upper latin list item</li>
    <li>Upper latin list item</li>
    <li>Upper latin list item</li>
</ol>
<ol class="hebrew">
    <li>Hebrew list item</li>
    <li>Hebrew list item</li>
    <li>Hebrew list item</li>
</ol>
<ol class="armenian">
    <li>Armenian list item</li>
    <li>Armenian list item</li>
    <li>Armenian list item</li>
</ol>
<ol class="georgian">
    <li>Georgian list item</li>
    <li>Georgian list item</li>
    <li>Georgian list item</li>
</ol>
<ol class="cjk-ideographic">
    <li>Ideographic list item</li>
    <li>Ideographic list item</li>
    <li>Ideographic list item</li>
</ol>
<ol class="hiragana">
    <li>Hiragana list item</li>
    <li>Hiragana list item</li>
    <li>Hiragana list item</li>
</ol>
<ol class="katakana">
    <li>Katakana list item</li>
    <li>Katakana list item</li>
    <li>Katakana list item</li>
</ol>
<ol class="hiragana-iroha">
    <li>Hiragana-iroha list item</li>
    <li>Hiragana-iroha list item</li>
    <li>Hiragana-iroha list item</li>
</ol>
<ol class="katakana-iroha">
    <li>Katakana-iroha list item</li>
    <li>Katakana-iroha list item</li>
    <li>Katakana-iroha list item</li>
</ol>
<ol class="none">
    <li>List item with none as list-style-type</li>
    <li>List item with none as list-style-type</li>
    <li>List item with none as list-style-type</li>
</ol>
</body>
</html>

See how this example renders

list-style-position Property

Property Usage and Effect Values Accepted Recommendations
list-style-position Determines text position relative to the list item marker. outside (the default) | inside Legacy browsers (e.g., Netscape 4.x) do not recognize this property; the instruction is ignored with no ill effects.

Not used very frequently.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Embedded CSS: List-Style-Position</title>
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .disc {list-style-type: disc;}
    .circle {list-style-type: circle;
             list-style-position: inside;}
    --></style>
</head>
<body>
<ul class="disc">
    <li>Disc list item
        <p>with text on another line</p>
    </li>
    <li>Disc list item
        <p>with text on another line</p>
    </li>
    <li>Disc list item
        <p>with text on another line</p>
    </li>
</ul>
<p>&nbsp;</p>
<ul class="circle">
    <li>Circle list item
        <p>using an inside list-style-position</p>
    </li>
    <li>Circle list item
        <p>using an inside list-style-position</p>
    </li>
    <li>Circle list item
        <p>using an inside list-style-position</p>
    </li>
</ul>
</body>
</html>

See how this example renders

list-style-image Property

Property Usage and Effect Values Accepted Recommendations
list-style-image Used to insert a graphical image as the list item marker. File name (and directory path, if located in a different directory than the CSS file; relative paths preferred) Browsers differ in how they place the image relative to the list item text, so it is recommended that testing occur cross-browser and cross-platform and that empty space be built into the image to improve rendering across browsers.

Also be careful with the application of line-height with these images. In some browsers this can cause rendering complications.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Embedded CSS: List-Style-Image</title>
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .disc {list-style-image: url(triangle.gif);}
    --></style>
</head>
<body>
<ul class="disc">
    <li>Graphical list item
        <p>with text on another line</p>
    </li>
    <li>Graphical list item
        <p>with text on another line</p>
    </li>
    <li>Graphical list item
        <p>with text on another line</p>
    </li>
</ul>
</body>
</html>

See how this example renders

list-style Shorthand Property

Property Usage and Effect Values Accepted Recommendations
list-style Combines the other list-related properties into one sequence. Sequence of Values: list-style-type list-style-position list-style-image Usually just the value for 'list-style-type' is specified, so this offers a slightly more streamlined way of providing that information.

Using the shorthand also means that the values not specified are assigned to defaults (overriding user settings).

If a list-style-image is specified as well as a list-style-type, the image is used. However, in situations where the client device does not support list-style-image or the image cannot be found, the list-style-type would be used.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Embedded CSS: List-Style</title>
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    ul {list-style: square url(triangle.gif);}
    --></style>
</head>
<body>
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
</body>
</html>

See how this example renders

List Numbering