list-style

Define all attributes of a list element in one decleration. A useful technique is to define a style-type in addition to a list-image. If an image is not able to be loaded, then the style-type will be used as a backup.

Value Description
circle Makes the bullet for each list item a circle.
square Makes the bullet for each list item a square.
disc Makes the bullet for each list item a disc. This is the default unordered list setting.
upper-alpha Changes the list style numbering to uppercase alphabetic.
lower-alpha Changes the list style numbering to lowercase alphabetic.
upper-roman Changes the list style numbering to uppercase roman numerals.
lower-roman Changes the list style numbering to lowercase roman numerals.
decimal This is the default numbering for an ordered list. List items are numbering in numerical order.
inside The bullets or numbers for the list will appear closer to the list items.
outside The bullets or numbers for the list will appear apart from the list items. This is the default setting.
url relative - specifies the location with respect to the local directory
exact - specifies the location with the full url
none Tells the browser to not use any kind of "styling" for this attribute.

Code:

ul { list-style: circle inside url("http://www.example.com/noPic.gif");}

Display:

  • This list's image did
  • NOT load correctly
  • But because we chose to include
  • A CSS list type, we avoided a bland list!