We learned how to work with borders and apply them to the various elements in our last tutorial. In this article we will go over setting margins and working with padding to give your web pages a seamless look. There is, as always, a lot of ground to cover, so let's get started.
CSS: Margins and Padding - Working with Lists in CSS (Page 4 of 5 )
There are several different ways to manipulate lists in CSS: list-item markers, list styles, list-item images, setting markers, and placing markers among them.
Working with List Item Markers in CSS (Unordered Lists)
List item markers are those thingamabobs that sit next to data. Or, in less confusing terms, bullets. There are several in CSS and in the following example we will learn how to use them:
<html>
<head>
<style type="text/css">
ul.circle {list-style-type: disc}
ul.clearcircle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<p> Here is a list of Lame Super Heroes:</P>
<ul class="circle">
<li>Aquaman</li>
<li>Namor</li>
<li>Namora</li>
</ul>
<ul class="clearcircle">
<li>Reed Richards</li>
<li>Captain America</li>
<li>Cannonball</li>
</ul>
<ul class="square">
<li>She-Hulk</li>
<li>She-Thing</li>
<li>Wasp</li>
</ul>
<ul class="none">
<li>Plastic Man</li>
<li>Super Pro</li>
<li>Apache Chief</li>
</ul>
</body>
</html>
Working with Item Markers in Ordered Lists
Working with item markers in ordered lists is very similar to the way you work with item markers in unordered lists:
Style Sheets 
/ 9 
HTML5 Boilerplate Introduction
