List-style-property in css: List property basically used to provide list effect on items. In the list you apply some type like disc, circle, square, upper-roman, lower-alpha etc. List style type specifies the type of list-item marker in the list. It is good to create a menu or navigation.
List style property:
- List-style-type
- List-style-position
- List-style-image
1. List-style-type: List style type Specify the type of list-item marker. Its default value is “disc”.
- Disc: This value is Default value. The marker is a filled circle
- Square: The bullet/marker is a square.
- Decimal: In this, the marker is a number.
- decimal-leading-zero: In this, the marker/bullet is a number with leading zeros (01, 02, 03, etc.)
- Lower-roman: In lower-roman, the marker is lower-roman (i, ii, iii, iv, v, etc.)
- upper-roman: In lower-roman, the marker is lower-roman (I, II, III, IV, V etc.)
- lower-greek: In lower-greek, the marker is lower-greek.
- upper-greek: The marker is upper-greek.
- lower-latin: In lower-latin, the marker is lower-latin (a, b, c, d, e, etc.).
- upper-latin: In upper-latin, The marker is upper-latin (A, B, C, D, E, etc.)
- Circle: The bullet/marker is a circle.
- Armenian: In this, the marker/ bullet is traditional Armenian numbering.
- cjk-ideographic: In this, the marker/bullet is plain ideographic numbers.
- decimal-leading-zero: In this, the marker is a number with leading zeros (01, 02, 03, etc.)
- Georgian: In this, the marker/bullet is traditional Georgian numbering.
- Hebrew: In this, the marker is traditional Hebrew numbering.
- Hiragana: In this, the marker is traditional Hiragana numbering.
- hiragana-iroha: In this, the marker is traditional Hiragana iroha numbering.
- Katakana: In this, the marker is traditional Katakana numbering.
- katakana-iroha: In this, the marker is traditional Katakana iroha numbering.
- lower-alpha: In this, the marker is lower-alpha (a, b, c, d, e, etc.).
- upper-alpha: In this, the marker is upper-alpha (A, B, C, D, E, etc.).
Example
2. List-style-position: List-style-position Specifies where to place the list-item marker. Default value is “outside”. The list-style-type property defines the type of list by setting the contented of each bullet, or bullet marker, in the list.
The list-style-position property defines where to Position the list bullets, and it work with one of two values: inside or outside.
Value of List-style-position:
Inside: It means that the bullet points will be come inside the list item
Outside: It means that the bullet points will be come outside the list item.
Example
3. List-style-image: List-style-image specify an image as the list-item bullet/marker in a list. It put an image in the place of bullet or marker in the list. It sets an image as the list item bullet/marker. In this, you cannot change the size of an image which is used as a bullet or marker , you select small size of image for bullets.
Example