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.

#CSS digger
Was this article helpful?

 
  • First item
  • Second item
  • Third item
×

Ctrl+D