HTML and CSS Reference
In-Depth Information
Figure 3.15: rounded corners
List Styles
CSS provides three properties that help authors create lists with style: list-
style-type , list-style-position , and list-style-image . A fourth shorthand
property, list-style , allows the author to specify all list properties in a single
statement. List properties can be applied to list and list item elements. A
list item element that doesn't have its own list style properties set inherits
those property values from its parent list element. Here are some examples of
list-style :
ul.nav { list-style-type: none; }
li.selected { list-style: url(images/check.gif) inside; }
he set of permissible values for the list-style-type property has under-
gone some changes over time. he CSS2 speciication has about 20 values,
whereas CSS2.1 has only a dozen. he drat speciication for CSS3 expands
the permissible values a couple orders of magnitude with support for many
national language symbol sets.
he list-style-image property allows a web designer to use a custom image
for a list bullet. he list-style-position property has three permissible values:
inside , outside (the default), and inherit . he outside value places the marker
some distance outside the list item's border. How far outside is browser-
dependent. he inside value places the item marker inside the list item's
content box as if it were an inline element. You can easily see the diference by
putting a border around the list items, as shown in Figure 3.16.
Search WWH ::

Custom Search