A Smarter Way To Learn HTML & CSS(2015)

39
Styling a lists's markers

Markers are the bullets in an unordered list or the numbers in an ordered list.

If you don’t specify what kind of bullets you want in an unordered list, the browser displays a disc: •

This is the CSS code that explicitly specifies a disc as the marker. It would normally be superfluous, since the disc is the default.

ul {
list-style-type: disc;
}

To use a ○ for the bullet, substitute circle for disc in the code above.

To use a ■ substitute square.

You can use an image for a bullet. The example below creates a class of unordered list that uses an image.

ul.custom {
list-style-image: url("images/heart.png");
}

In the code above, "images/heart.png" tells the browser the path and file name of the image.

An image used as a bullet creates headaches. To begin with, you must size the image to fit the list text. Then, if the user zooms in or out on the page, the browser doesn’t adjust the bullet to fit, as it does with the built-in disc, circle, and square. Everything gets out of whack. It’s possible to build a defense against this, but you’re probably better off spending your coding time on something that the user cares more about.

The default list-style-type for ordered lists is decimal—1, 2, 3 etc. You can change it to decimal-leading-zero—01, 02, 03 etc.; lower-alpha—a, b, c etc.; upper-alpha—A, B, C etc.; lower-roman—i., ii., iii. etc.; and upper-roman—I, II, III etc. Here’s code that creates a class for upper-roman.

ol.second-level {
list-style-type: upper-roman;
}

In your CSS file style unordered list markers as squares. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-39-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/39.html