Tutorial 1. Background images for bullets

You can change list bullets to squares or circles, but a far better option is to use background images for bullets.

• Why use background images for bullets?
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 3a – Add your own indent
• Step 4 – Add the background image
• Step 5 – Set no-repeat
• Step 6 – Position the image
• Step 7 – Move the content
• Variation – right-aligned list
• Variation – setting a list width
• Variation – adding space around list items
• Variation – icon lists
• All steps combined

Tutorial 2. Rollover list

This tutorial explains how to achive rollover effects using CSS.

• Introduction to rollovers
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display block
• Step 5 – Add a background color
• Step 6 – Set the list width
• Step 7 – Add padding
• Step 8 – Text decoration
• Step 9 – Add a rollover color
• Step 10 – Separate the list items
• Variation – current page indication
• Variation – Adding borders
• All steps combined

Tutorial 3. Nested lists

This tutorial explains how to apply CSS to nested lists.

• Introduction to nested lists
• Step 1 – Make a nested list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display block
• Step 5 – Add a background color
• Step 6 – Set the list width
• Step 7 – Add padding
• Step 8 – Text decoration
• Step 9 – Add a rollover color
• Step 10 – Separate the list items
• Step 11 – Duplicating the main rule set
• Step 12 – Change nested list background color
• Step 13 – Adding padding-left to nested items
• Step 14 – Making main list items bold
• All steps combined

Tutorial 4. Horizontal lists

This tutorial explains how to build horizontal lists using “display: inline”.

• Introduction to horizontal lists
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display inline
• Step 5 – Removing text decoration
• Step 6 – Padding around list items
• Step 7 – Adding background color
• Step 8 – Add a rollover color
• Step 9 – Center the list
• All steps combined