CSS list-style property
Description
CSS list style is a shorthand property of list-style-type, list-style-position, and list-style-image. We'll learn how to specify the type of list item markers, the position, and the use of image as the list item markers.
Syntax
list-style : list-style-type list-style-position list-style-image
Property values
list-style-type
discDefault
-
disc as item markers.
list-style-type: disc;
circle
-
circle as item markers.
list-style-type: circle;
decimal
-
decimal number as item markers
list-style-type: decimal;
decimal-leading-zero
-
decimal number as item markers with leading zero.
list-style-type: decimal-leading-zero;
lower-roman
-
lower roman numbers as item markers
list-style-type: lower-roman;
upper-roman
-
upper roman numbers as item markers.
list-style-type: upper-roman;
lower-greek
-
lower greek letters as item markers
list-style-type: lower-greek;
lower-latin
-
lower case latin letters as item markers
list-style-type: lower-latin;
upper-latin
-
upper case latin letters as item markers
list-style-type: upper-latin;
lower-alpha
-
lower alphabets as item markers.
list-style-type: lower-alpha;
upper-alpha
-
upper aphabets as item markers
list-style-type: upper-alpha;
armenian
-
armenian letters as item markers
list-style-type: armenian;
georgian
-
georgian letters as item markers
list-style-type: georgian;
list-style-position
outside Default
-
In this case, the markers don't merge themselves with the list item content.
list-style-position: outside;
inside
-
In this case, the markers become a part of the list item content.
list-style-position: inside;
list-style-image
noneDefault
-
no image is used as the content of list item markers. In this case, list-style-type defines the type of list item markers.
list-style-image: none;
url(image-address)
-
It defines the address of the image that is used as the content of list item markers.
list-style-image: url('img/web4college.png');
Applicable to
It applies to list items.
From web4college, the free CSS digger
#CSS digger
Was this article helpful?
- First item
- Second item
- Third item