Working the Lists

CSS for this page

body  {margin: 40px 200px 40px 100px;}
UL  {color: navy; list-style-image: url(listbul.gif);}
OL  {color: maroon;}
DL  {color: #000000;}
DT  {text-decoration: overline;}
UL OL {border:none;}
OL UL {border:none;}
UL OL LI {list-style-image: none;
list-style-type: lower-alpha; color:red;} 
ul ul  {list-style-image: none; list-style-type: square;}
UL, OL {padding: 5px;
border: medium dashed purple;} 

The lists types are color-coded as follows:

1. Ordered lists: maroon

• Unordered lists: navy

1. This is the default list-style-position for an ordered list.
2. This is an example of list-style-position: outside; in an ordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
3. This is an example of list-style-position: inside; in an ordered list

1. This is the same list as above with this list item added and padding-left: 25px; subtracted.
2. This is the default list-style-position for an ordered list.
3. This is an example of list-style-position: outside; in an ordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
4. This is an example of list-style-position: inside; in an ordered list

• This is the default list-style-position for an unordered list.
• This is an example of list-style-position: outside; in an unordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
• This is an example of list-style-position: inside; in an unordered list

• This is the same list as above with this list item added and padding-left: 25px; subtracted.
• This is the default list-style-position for an unordered list.
• This is an example of list-style-position: outside; in an unordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
• This is an example of list-style-position: inside; in an unordered list

1. This is the default list-style-position for an ordered list.
• Then this nested unordered list comes along
• With list-style-position: outside;
• And list-style-position: inside;
2. This is an example of list-style-position: outside; in an ordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
3. This is an example of list-style-position: inside; in an ordered list

1. This is the same list as above with this list item added and padding-left: 25px; subtracted.
• Then this nested unordered list comes along
• With list-style-position: outside;
• And list-style-position: inside;
2. This is the default list-style-position for an ordered list.
3. This is an example of list-style-position: outside; in an ordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
4. This is an example of list-style-position: inside; in an ordered list

• This is the default list-style-position for an unordered list.
1. Then this nested ordered list comes along
2. With list-style-position: outside;
3. And list-style-position: inside;
• This is an example of list-style-position: outside; in an unordered list. The numeral was not visible until a rule of padding-left: 25px; was added.
• This is an example of list-style-position: inside; in an unordered list