CSS: Lists


I think there are 4 main properties concerning lists elements. These are: list-style-type, list-style-image, list-style-position and list-style. In order to understand these properties, you have to know HTML list tags, such as <UL> or <LI>. If you don't know what about I'm talking, please follow this link: list tags.

You can specify the list item marker by means of the keyword list-style-type. Possible values are: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. Examples:

OL { list-style-type : decimal } /* this means: 1,2,3,4 and so on..*/
OL { list-style-type : lower-alpha } /* this means: a,b,c,d and so on..*/
OL { list-style-type : lower-roman } /* this means: i,ii,iii,iv and so on..*/

You can also specify an image as a marker by means of the keyword list-style-image. Example:

UL { list-style-image : url(http://myserver/mydirectory/myimage.gif) }

You can specify the position of the list item marker, by means of the keyword list-type-position. Possible values are: inside or outside. Example:

UL { list-style-position : inside }

Finally, you can also use a kind of shorthand notation for setting the three properties already shown. You have to use the keyword list-style. Examples:

UL { list-style : square upper-roman inside }


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea