Styling and Using Lists

Remember that we had an unordered list without styling back in one of the exercises in "Simple Examples" and that it appeared so:

Our List
• 
• Index
• Anything else you want in a list

It's time for a bit of styling of this list. First, let's take away the black disc. This requires only making the list style a bit different by telling it to have no marker.
ul {list-style-type: none;}
If we may want more than one list in this document, we should specify that there may be different styles, one if the list belongs to class a and another if the list belongs to class b. We will put this list in class a.
ul.a {list-style-type: none;}
Let's also tell the items to be indented a bit from the heading
ul.a {list-style-type: none; padding-left: 15px;}

Our List
• 
• Index
• Anything else you want in a list

If the document has a vertical navigation section along one side of the screen, this list could be put into that navigation section to provide links. The list can also be placed anywhere in the document with or without links.

The list style can be changed to make the list organization completely different. We styled lists belonging to "class a" above and will now style lists belonging to a "class b."
ul.b {list-style-type: none;} This merely eliminates a disc, circle, square, or other marker.
ul.b li {display: inline; padding-top: 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 0;} Inline display is not default and must be specified; it tells the items to be one beside another. The padding places that much unoccupied space around each line item.

This would look exactly like the navigations section if it were blue, and this is in fact a duplicate of it except for the color.

Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).