ptg1647605280 LESSON 5: Organizing Information with Lists
If you don’t like any of the bullet styles used in unordered lists, you can substitute an
image of your own choosing in place of them. To do so, use the list-style-image prop-
erty. By setting this property, you can use an image of your choosing for the bullets in
your list. Here’s an example :
<ul style="list-style-image: url(/bullet.gif);">
<li>Example</li>
</ul>Don’t worry much about what this all means right now. I discuss images later in Lesson
9, “Using Images on Your Web Pages.” Right now, all you need to know is that the URL
in parentheses should point to the image you want to use.
As you’ve seen in the screenshots so far, when items are formatted in a list and the list
item spans more than one line, the lines of text that follow the first are aligned with the
beginning of the text on the first line. If you prefer that they begin at the position of the
bullet or list number, as shown in Figure 5.7, use the list-style-position property:
<ul style="list-style-position: inside;">
<li>Always use Pillsbury's Best Flour.</li>
<li>Sift flour twice before adding to cakes or breakfast cakes.</li>
<li>Make all measurements level by using edge of knife to lightly
scrape off from top of cup or spoon until material is even with
the edges.</li>
<li>Use same sized cups or spoons in measuring for the same recipe.</li>
<li>Before starting to make recipe, read through carefully, then put
on table all the materials and tools needed in making that particular
recipe.</li>
</ul>The default value is outside, and the only alternative is inside. Finally, if you want
to modify several list-related properties at once, you can simply use the list-styleFIGURE 5.7
How the list-
style-position
property affects the
layout of lists.