Use CSS to create Lists of multiple types according to style demands.
1. Lists are broadly of two type
ordered-list : list items begin with numbers and characters.
unordered-list : List items begin with bullet points.
However there are various other details and variation that can be applied to List using CSS. We, learn them in detail one by one.
CSS List Markers: list-style-type Property
1. CSS enables you change the marker(or bullet points) of list to various other types using list-style-type property.
2. The value of list-style-property can be:
Markers like box , georgian, circle, armenian, disk, dash, square or nothing using none.
decimal : decimal numbers for markers.
binary : Binary Numbers for Markers
lower-alpha : Lowercase alpha characters for Markers
upper-alpha : Uppercase alpha characters for Markers
See, the above demo to see all the types of list
Example: CSS List - list-style-typeGive it a TRY! » Note: CSS3 specifications removed the annoying blink value for text-decoration
CSS List Image Marker: list-style-image property
1. Instead of a boring bullet as marker you can have your own custom image as a marker using CSS property of list-style-image property.
2. The value of list-style-image is the url location of the image to be used as a list bullet.
Example: CSS List Image Marker - list-style-typeGive it a TRY! » Note: Even more keywords which were part of CSS2 specification have been removed.
CSS List Marker's Position: list-style-position
1. The position of the list's marker relative to the box containing the list can be set using list-style-position property.
2. The value list-style-position can take are.
inside : The list marker is inside the content box.
outside : The list marker is outside the content box.
inherit : The list marker inherits property from the parent element.
Example:CSS Text Marker Position list-style-positionGive it a TRY! » Note: In practical usage the hanging indent(outside) is prefered over non-hanging indent(inside) .
CSS List ShortHand
1. The multiple list properties can be specified in one single declaration using CSS shorthand property.