Unordered list markers can be styled using one of three keywords: disc, circle, or square (see Example 10-7).
Example 10-7. Inline styles demonstrating the three marker keywords for unordered lists
<h2>What to Bring:</h2> <ul> <li style="list-style-type: disc;">A beverage of choice.</li> <li style="list-style-type: circle;">Munchies.</li> <li style="list-style-type: square;">Music and movies.</li> </ul>
Figure 10-12 shows the shapely results.
Figure 10-12. Showing off the disc, circle, and square optionsnote that some browsers will use slightly different markers, but the general features are retained.
If you'd like to replace the marker with a custom image, create the image and add it using the list-style-image property (see Example 10-8).
Example 10-8. Viewing the complete document along with the image-based bullet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
background-position: right top; background-repeat: no-repeat;}
h1 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}
ul {list-style-image: url(bullet.gif);}
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage of choice.</li>
<li>Munchies.</li>
<li>Music and movies.</li>
</ul>
</body>
</html>
No need for classes; there's only one image needed. This image will now replace the marker (see Figure 10-13).
Figure 10-13. Using images instead of text-based markers to customize your bullets.
Another list property you can use is the list-style-position property, with a value of either outside or inside. The outside value positions the marker outside the block, so when the line wraps, it indentstypical list behavior. Placing the marker inside results in no indent (see Figure 10-14).
Figure 10-14. The top option uses outside and the bottom inside for the list's position.
by updated