Working the Lists

The purpose of this series is to show how CSS rules effect the appearance of lists. Each page in the series presents the same set of lists. Each page uses a slightly different set of CSS rules which are displayed at the top of each page.

The lists types are color-coded as follows:

1. Ordered lists: maroon

• Unordered lists: navy

The properties explored are:

1. List-style-image
2. List-style-type
3. List-style-position
4. Border

Also addressed are:

• Contextual selectors
• Selectors in series

CSS for this page

body  {margin: 40px 200px 40px 100px;}
UL  {color: navy; list-style-image: url(listbul.gif);}
OL  {color: maroon;}

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

Note that the following is an ordered list nested in an unordered 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

UL, OL {list-style-position: inside; padding: 5px;
border: medium dashed purple;}