Eye of Design helps users find information on web design and development along with feature a gallary of works created by Gary R. Hess.

List Style

Using the CSS list style can help organize data in a helpful way for visitors and keep the overall design of a site.

There are several types of list styles. They are:

  • list-style-image:
  • list-style-type:
  • list-style-position:
To use list-style-image
The list-style-image property allows you to use an image instead of a marker beside each listed item. In order to use this property you must use this code: list-style-image: url(image.gif);. Where image.gif is equal to the name of the image file. The size used for each listed item image is 15x15 pixels.

To use list-style-type
The list-style-type is used in order to change the default marker, the disc, to another one. The markers which may be used are:

  • disc
  • circle
  • square
  • decimal
  • upper-alpha
  • lower-alpha
  • upper-roman
  • lower-roman
To use the list-style-type use this code: list-style-type: circle; where circle is the name of the marker which is to be used.

To use list-style-position
There are two positions which may be used:

  • outside
  • inside
The default set for each listed item is outside. Which stands for outside the list item. Whereas inside stands for flushed inside with the list item. To use either: list-style-position: inside; or list-style-position: outside;.

List style shortcuts
All list-style properties may be used within a single line. To do this, list all three values after list-style:. For example: list-style: url(image.gif) none outside;. The order does not matter.