InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS list-style-type – specify marker (disc, square, numeric, etc.) for a list

on Mar 13, 2016

CSS list-style-type property is used to describe type of list item marker in a list. Its initial value is disc. The value of list-style-type can also be specified in shorthand property list-style.

CSS property list-style-type

CSS version: CSS 2.1
Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Initial: disc
Applies to: elements with 'display: list-item'
Inherited: yes

list-style-type value behaviour

This property specifies appearance of the list item marker if ‘list-style-image’ has the value ‘none’ or if the image pointed to by the URI cannot be displayed.

list-style-type values

There are mainly three types of markers.

  • Glyphs: specified with disc, circle, and square
  • numbering systems:
    decimal
      Decimal numbers, beginning with 1.
    decimal-leading-zero
      Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
    lower-roman
      Lowercase roman numerals (i, ii, iii, iv, v, etc.).
    upper-roman
      Uppercase roman numerals (I, II, III, IV, V, etc.).
    georgian
      Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
    armenian
      Traditional uppercase Armenian numbering.
    
  • alphabetic:
    lower-latin or lower-alpha
      Lowercase ascii letters (a, b, c, ... z).
    upper-latin or upper-alpha
      Uppercase ascii letters (A, B, C, ... Z).
    lower-greek
      Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
    

Note that when using unordered list (ul) tag with numbered values (decimal, etc.), the number markers will appear. So list-style-type value will override the default behaviour of ul (or ol) tag.

Content as marker

CSS 3 mentions setting content as marker. This is not supported by most browsers yet.

Examples – list-style-type – disc, square and circle

In the following code, CSS property list-style-type can be changed to the following values
  • disc
  • square
  • circle
<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-type:disc; /*default for ul is disc*/
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
list-style-type refresh done
try it online

Examples – list-style-type – numeric values

In the following code, CSS property list-style-type can be changed to the following values
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • georgian
  • armenian
<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-type:decimal;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
list-style-type refresh done
try it online

Example – list-style-type – alphabetic values

In the following code, CSS property list-style-type can be changed to the following values
  • lower-alpha
  • upper-alpha
  • lower-greek
<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-type:lower-alpha;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
list-style-type refresh done
try it online

Related

  • CSS list-style - shorthand for list marker type, image and position
  • CSS list-style-position - specify if list markers will be outside or inside
  • CSS list-style-image - use image as marker in list
  • HTML li tag
  • HTML ol tag
  • HTML ul tag

Specification

  • W3C CSS 2.1 list-style-type specification
  • W3C CSS 3 list-style-type specification

Suggested posts:

  1. CSS list-style-image – use image as marker in list
  2. CSS list-style-position – specify if list markers will be outside or inside
  3. CSS pseudo class :visited – style for visited links
  4. CSS white-space – collaping and wrapping of whitespaces and newlines
  5. CSS :only-child – define style if element if only child
  6. CSS border radius and round corners examples
  7. jQuery – find select element selectedIndex, value and text
  8. Css :last-child selector – last child element
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress