HTML and CSS Reference
In-Depth Information
<li>8 - 10 megapixels</li>
<li>10 - 12 megapixels</li>
<li>12 and above megapixels</li>
</ul>
</li>
<li>Compact Cameras</li>
<li>Waterproof Cameras</li>
</ul>
As shown in Figure 13-3, browsers typically render items
within a nested
<ul>
tag with a different type of bullet.
Usually the first-level bullet is a solid disc, the second-level
item is an open circle, and the third and subsequent level
items are solid squares. As you learn in the next section,
it's possible for you to control the bullet image used on
any level through CSS.
cHanGinG LisT aPPearance
FiGure 13-3
Because an unordered list is basically composed of two
tags (
<ul>
and
<li>
), you have two ways to control its
look-and-feel through CSS.
➤
CSS rules with a
ul
selector define the overall positioning, padding, and list style, that is, the
type of bullet displayed.
To define the basic look of the list, you would use the
➤
li
selector.
In addition to supporting basic appearance properties — such as color, font, and size — CSS has a
whole category of properties dedicated to the list image. Three individual properties and one all-
encompassing property can be used as a shorthand method of setting the separate attributes. The
overall property is
list-style
, and the three individual properties are:
➤
list-style-type:
Sets the kind of bullet to be used in
<ul>
list items. Acceptable values are
none, disc, circle, and square.
➤
list-style-position:
Determines whether the leading symbol appears inside or outside the docu-
ment flow. If this property is set to
outside
(the default option), the symbol stays to the left
of the entire text block. Set the property to
inside
if you want the text to wrap to the same
position as the list symbol. Figure 13-4 illustrates the difference between the two options
with the
outside
option used on the page in the background and the
inside
option set for
the page in the foreground.
list-style-image:
➤
Use this property to set up a custom graphic as the bullet. As with the
background-image
property, this property takes a path to the image in a
url()
argument.
