Copyright © tutorialspoint.com

CSS - list-style-type

previous next


Advertisements

Description:

The list-style-type property sets the counting (or bullet) style used in the marker for a list item.

Possible Values:

Here are the values which can be used for an unordered list:

ValueDescription
noneNA
disc (default)A filled-in circle
circleAn empty circle
squareA filled-in square

Here are the values which can be used for an ordered list:

ValueDescriptionExample
decimalNumber1,2,3,4,5
decimal-leading-zero0 before the number01, 02, 03, 04, 05
lower-alphaLowercase alphanumeric charactersa, b, c, d, e
upper-alphaUppercase alphanumeric charactersA, B, C, D, E
lower-romanLowercase Roman numeralsi, ii, iii, iv, v
upper-roman Uppercase Roman numeralsI, II, III, IV, V
lower-greek The marker is lower-greek alpha, beta, gamma
lower-latin The marker is lower-latin a, b, c, d, e
upper-latin The marker is upper-latin A, B, C, D, E
hebrew The marker is traditional Hebrew numbering  
armenian The marker is traditional Armenian numbering  
georgian The marker is traditional Georgian numbering  
cjk-ideographicThe marker is plain ideographic numbers 
hiraganaThe marker is hiraganaa, i, u, e, o, ka, ki
katakanaThe marker is katakanaA, I, U, E, O, KA, KI
hiragana-irohaThe marker is hiragana-irohai, ro, ha, ni, ho, he, to
katakana-irohaThe marker is katakana-irohaI, RO, HA, NI, HO, HE, TO

Applies to:

All the elements with a display of list-item.

DOM Syntax:

object.style.listStyleType="decimal"

Example:

Here is the example:

<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

This will produce following result:

  • Maths
  • Social Science
  • Physics
  • Maths
  • Social Science
  • Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics

To Become more comfortable - Do Online Practice


previous next

Copyright © tutorialspoint.com