HTML and CSS Reference
In-Depth Information
The following input and output example shows an unordered list. Figure 5.4 shows the
results in a browser.
Input
▼
<p>
Things I like to do in the morning:
</p>
<ul>
<li>
Drink a cup of coffee
</li>
<li>
Watch the sunrise
</li>
<li>
Listen to the birds sing
</li>
<li>
Hear the wind rustling through the trees
</li>
<li>
Curse the construction noises for spoiling the peaceful mood
</li>
<
/ul
>
.
Output
FIGURE 5.4
An unordered list.
Customizing Unordered Lists
As with ordered lists, unordered lists can be customized using the
type
attribute or the
list-style-type
property. By default, most browser use solid bullets to mark entries in
unordered lists. Text browsers such as Lynx generally opt for an asterisk. The other bullet
styles are as follows:
“disc”
—A disc or bullet; this style is the default.
n
“square”
—Obviously, a square rather than a disc.
n
“circle”
—As compared with the
disc
, which most browsers render as a filled cir-
cle, this value should generate an unfilled circle.
n
In this case, the values for
list-style-type
and for the
type
attribute are the same. In
the following input and output example, you see a comparison of these three types as
rendered in a browser (see Figure 5.5):
