HTML and CSS —

Shorthand CSS for List Styles

Another shorthand property is the list-style property. It takes properties from lists and enables you to author them in shorthand (see Example 10-9).

Example 10-9. Using the list-style shorthand property
<!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: url(arrow.gif) inside;}
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage <br />of choice.</li>
<li>Munchies.</li>
<li>Music <br />and movies.</li>
</ul>
</body>
</html>

In this case, I've styled the ul element using an image and a position. You could swap the image for a keyword if you don't want to use an image. You'll notice that I purposely broke the lines so you can see the influence of the inside value (see Figure 10-15).

Figure 10-15. Styling the list using the list-style shorthand property.