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:
<html>
<head>
<style type="text/css">
ol.numeric {list-style-type: decimal}
ol.lowerroman {list-style-type: lower-roman}
ol.upperroman {list-style-type: upper-roman}
ol.loweralpha {list-style-type: lower-alpha}
ol.upperalpha {list-style-type: upper-alpha}
</style>
</head>
<p>List of Lame Super Villains</p>
<body>
<ol class="numeric">
<li>My Underwear Is Too Tight Man</li>
<li>Evil Laugher</li>
<li>Guy with an Enormous Brain</li>
</ol>
<ol class="lowerroman">
<li>Doctor Doom</li>
<li>Kang</li>
<li>Sandman</li>
</ol>
<ol class="upperroman">
<li>Doctor Octopus</li>
<li>Rhino</li>
<li>The Blob</li>
</ol>
<ol class="loweralpha">
<li>Bill Clinton</li>
<li>Hillary Clinton</li>
<li>Red Skull</li>
</ol>
<ol class="upperalpha">
<li>Super Skrull</li>
<li>Toad</li>
<li>The Magnus</li>
</ol>
</body>
</html>
Next: How to Set an Image as a List Marker >>
More Style Sheets Articles
More By James Payne
/ 3 
