HTML and CSS Reference
In-Depth Information
Input
▼
<ul style=“list-style-type: disc”>
<li>
DAT - Digital Audio Tapes
</li>
<li>
CD - Compact Discs
</li>
<li>
Cassettes
</li>
</ul>
<ul style=“list-style-type: square”>
<li>
DAT - Digital Audio Tapes
</li>
<li>
CD - Compact Discs
</li>
<li>
Cassettes
</li>
</ul>
<ul style=“list-style-type: circle”>
<li>
DAT - Digital Audio Tapes
</li>
<li>
CD - Compact Discs
</li>
<li>
Cassettes
</li>
</ul>
Output
.
FIGURE 5.5
Unordered lists
with different
bullet types.
5
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
property. 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. Images are discussed in Lesson
9, “Adding Images, Color, and Backgrounds.” 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
