copyright © CSSPG, lud April 21 1999

 for practical use of CSS

CSS Lists

this document is located at...
<URI:http://css.nu/examples/list-template.html>

 Examples: CSS List types

Ordered Lists (Outside)

Using OL.decimalo { display: list-item; list-style: decimal outside;}

1. First List Item
2. Second List Item
3. Final List Item

Using OL.alphalo { display: list-item; list-style: lower-alpha outside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.romanlo { display: list-item; list-style: lower-roman outside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.alphauo { display: list-item; list-style: upper-alpha outside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.romanuo { display: list-item; list-style: upper-roman outside; }

1. First List Item
2. Second List Item
3. Final List Item

Unordered Lists (Outside)

Using UL.disco { display: list-item; list-style: disc outside; }

• First List Item
• Second List Item
• Final List Item

Using UL.circleo { display: list-item; list-style: circle outside; }

• First List Item
• Second List Item
• Final List Item

Using UL.squareo { display: list-item; list-style: square outside; }

• First List Item
• Second List Item
• Final List Item

Using UL.o { display: list-item; list-style: none outside; }

• First List Item
• Second List Item
• Final List Item

Ordered Lists (Inside)

Using OL.decimali { display: list-item; list-style: decimal inside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.alphali { display: list-item; list-style: lower-alpha inside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.romanli { display: list-item; list-style: lower-roman inside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.alphaui { display: list-item; list-style: upper-alpha inside; }

1. First List Item
2. Second List Item
3. Final List Item

Using OL.romanui { display: list-item; list-style: upper-roman inside; }

1. First List Item
2. Second List Item
3. Final List Item

Unordered Lists (Inside)

Using UL.disci { display: list-item; list-style: disc inside; }

• First List Item
• Second List Item
• Final List Item

Using UL.circlei { display: list-item; list-style: circle inside; }

• First List Item
• Second List Item
• Final List Item

Using UL.squarei { display: list-item; list-style: square inside; }

• First List Item
• Second List Item
• Final List Item

Using UL.i { display: list-item; list-style: inside; }

• First List Item
• Second List Item
• Final List Item

 Examples: Value & Start Attributes

CSS2 offers a complex mechanism for implementing automatic counters and generated text through the combination of several properties. These properties are listed below, then examples are provided. As of 30 August, 1998, no UA has implemented the necessary portions of CSS2 to make the examples utile.

	display: list-item
	content: counter(name)
	content: counter(name, style)
	:before
	:after		
	counter-reset: integer
	counter-reset: identifier
	counter-increment: integer
	counter-increment: identifier

     OL { counter-reset: item }
     LI { display: block }
     LI:before { content: counters(item, "."); counter-increment: item }

CSS Pointers Navigation

Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL

Main Site Navigation

Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?

CSSPG ~ Sue ~ Roland