- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS list-style-type
The CSS list-style-type property is used to define the type of list marker. For example:
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> ul{list-style-type: upper-roman;} </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Python</li> </ul> </body> </html>
Output
- HTML
- CSS
- JavaScript
- Python
CSS list-style-type Syntax
The syntax of list-style-type property in CSS, is:
list-style-type: x;
The value of x should be any of the following:
- circle
- disc
- square
- lower-alpha
- lower-greek
- lower-latin
- lower-roman
- upper-alpha
- upper-greek
- upper-latin
- upper-roman
- armenian
- decimal
- decimal-leading-zero
- georgian
- hebrew
- hiragana
- hiragana-iroha
- katakana
- katakana-iroha
- cjk-ideographic
Note - The first three are for unogranized list, where remaining are for organized list item markers.
Note - The disc is the default marker for unorganized list. Whereas the decimal is the default marker for organized list.
CSS list-style-type Example
HTML with CSS Code
<!DOCTYPE html> <html> <head> <style> ul.a{list-style-type: circle;} ul.b{list-style-type: disc;} ul.c{list-style-type: square;} ol.a{list-style-type: lower-alpha;} ol.b{list-style-type: lower-greek;} ol.c{list-style-type: lower-latin;} ol.d{list-style-type: lower-roman;} ol.e{list-style-type: upper-alpha;} ol.f{list-style-type: upper-greek;} ol.g{list-style-type: upper-latin;} ol.h{list-style-type: upper-roman;} ol.i{list-style-type: armenian;} ol.j{list-style-type: decimal;} ol.k{list-style-type: decimal-leading-zero;} ol.l{list-style-type: georgian;} ol.m{list-style-type: hebrew;} ol.n{list-style-type: hiragana;} ol.o{list-style-type: hiragana-iroha;} ol.p{list-style-type: katakana;} ol.q{list-style-type: katakana-iroha;} ol.r{list-style-type: cjk-ideographic;} </style> </head> <body> <h2>list-style-type: circle</h2> <ul class="a"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ul> <h2>list-style-type: disc</h2> <ul class="b"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ul> <h2>list-style-type: square</h2> <ul class="c"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ul> <h2>list-style-type: lower-alpha</h2> <ol class="a"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: lower-greek</h2> <ol class="b"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: lower-latin</h2> <ol class="c"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: lower-roman</h2> <ol class="d"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: upper-alpha</h2> <ol class="e"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: upper-greek</h2> <ol class="f"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: upper-latin</h2> <ol class="g"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: upper-roman</h2> <ol class="h"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: armenian</h2> <ol class="i"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: decimal</h2> <ol class="j"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: decimal-leading-zero</h2> <ol class="k"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: georgian</h2> <ol class="l"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: hebrew</h2> <ol class="m"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: hiragana</h2> <ol class="n"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: hiragana-iroha</h2> <ol class="o"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: katakana</h2> <ol class="p"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: katakana-iroha</h2> <ol class="q"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> <h2>list-style-type: cjk-ideographic</h2> <ol class="r"> <li>CSS</li> <li>HTML</li> <li>JS</li> </ol> </body> </html>
Output
list-style-type: circle
- CSS
- HTML
- JS
list-style-type: disc
- CSS
- HTML
- JS
list-style-type: square
- CSS
- HTML
- JS
list-style-type: lower-alpha
- CSS
- HTML
- JS
list-style-type: lower-greek
- CSS
- HTML
- JS
list-style-type: lower-latin
- CSS
- HTML
- JS
list-style-type: lower-roman
- CSS
- HTML
- JS
list-style-type: upper-alpha
- CSS
- HTML
- JS
list-style-type: upper-greek
- CSS
- HTML
- JS
list-style-type: upper-latin
- CSS
- HTML
- JS
list-style-type: upper-roman
- CSS
- HTML
- JS
list-style-type: armenian
- CSS
- HTML
- JS
list-style-type: decimal
- CSS
- HTML
- JS
list-style-type: decimal-leading-zero
- CSS
- HTML
- JS
list-style-type: georgian
- CSS
- HTML
- JS
list-style-type: hebrew
- CSS
- HTML
- JS
list-style-type: hiragana
- CSS
- HTML
- JS
list-style-type: hiragana-iroha
- CSS
- HTML
- JS
list-style-type: katakana
- CSS
- HTML
- JS
list-style-type: katakana-iroha
- CSS
- HTML
- JS
list-style-type: cjk-ideographic
- CSS
- HTML
- JS
« Previous Tutorial Next Tutorial »