CSS List Examples <ul> <ol>

There are two types of list in HTML: ordered and unordered.

Unordered list styles:

  • square
  • circle
  • disc
  • none

Ordered list styles:

  • armenian
  • cjk-ideographic
  • decimal
  • decimal-leading-zero
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • lower-alpha
  • lower-greek
  • lower-latin
  • lower-roman
  • upper-alpha
  • upper-latin
  • upper-roman

Ordered list styles:

circle
  • Circle list item
  • Another circle list item
square
  • Square list item
  • Another square list item
disc (default)
  • Disc list item
  • Another disc list item
none
  • None list item
  • Another none list item
image
  • Image list item
  • Another Image list item

Unordered list styles:

armenian:
  1. Ordered list item with armenian style type
  2. Ordered list item with armenian style type
  3. Ordered list item with armenian style type
cjk-ideographic:
  1. Ordered list item with cjk-ideographic style type
  2. Ordered list item with cjk-ideographic style type
  3. Ordered list item with cjk-ideographic style type
decimal:
  1. Ordered list item with decimal style type
  2. Ordered list item with decimal style type
  3. Ordered list item with decimal style type
decimal-leading-zero:
  1. Ordered list item with decimal-leading-zero style type
  2. Ordered list item with decimal-leading-zero style type
  3. Ordered list item with decimal-leading-zero style type
georgian:
  1. Ordered list item with georgian style type
  2. Ordered list item with georgian style type
  3. Ordered list item with georgian style type
hebrew:
  1. Ordered list item with hebrew style type
  2. Ordered list item with hebrew style type
  3. Ordered list item with hebrew style type
hiragana:
  1. Ordered list item with hiragana style type
  2. Ordered list item with hiragana style type
  3. Ordered list item with hiragana style type
hiragana-iroha:
  1. Ordered list item with hiragana-iroha style type
  2. Ordered list item with hiragana-iroha style type
  3. Ordered list item with hiragana-iroha style type
katakana:
  1. Ordered list item with katakana style type
  2. Ordered list item with katakana style type
  3. Ordered list item with katakana style type
katakana-iroha:
  1. Ordered list item with katakana-iroha style type
  2. Ordered list item with katakana-iroha style type
  3. Ordered list item with katakana-iroha style type
lower-alpha:
  1. Ordered list item with lower-alpha style type
  2. Ordered list item with lower-alpha style type
  3. Ordered list item with lower-alpha style type
lower-greek:
  1. Ordered list item with lower-greek style type
  2. Ordered list item with lower-greek style type
  3. Ordered list item with lower-greek style type
lower-latin:
  1. Ordered list item with lower-latin style type
  2. Ordered list item with lower-latin style type
  3. Ordered list item with lower-latin style type
lower-roman:
  1. Ordered list item with lower-roman style type
  2. Ordered list item with lower-roman style type
  3. Ordered list item with lower-roman style type
upper-alpha:
  1. Ordered list item with upper-alpha style type
  2. Ordered list item with upper-alpha style type
  3. Ordered list item with upper-alpha style type
upper-roman:
  1. Ordered list item with upper-latin style type
  2. Ordered list item with upper-latin style type
  3. Ordered list item with upper-latin style type
upper-roman:
  1. Ordered list item with upper-roman style type
  2. Ordered list item with upper-roman style type
  3. Ordered list item with upper-roman style type

List style position: inside vs outside

  1. List style position outside - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, sapien et accumsan tempor, tellus metus bibendum enim, in imperdiet lectus lorem sed urna.
  2. List style position inside - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, sapien et accumsan tempor, tellus metus bibendum enim, in imperdiet lectus lorem sed urna.

CSS code

Try it »
#demo ul.circle {
	list-style: circle;
}
#demo ul.square {
	list-style: square;
}
#demo ul.disk {
	list-style:disc;
}
#demo ul.none {
	list-style: none;
}
#demo ul.icon {
	list-style: url("sites/all/themes/professional_theme/images/html/list-icon-star.png");
}
#demo .c2 li, #demo .c3 li {
	color: #F6C;
}
#demo .c2 li span, #demo .c3 li span {
	color: #000;
}
#demo .c2, #demo .c3 , #demo .c4{
	float: left;
	width: 33%;
}
#demo ol.armenian {
	list-style: armenian;
}
#demo ol.cjk-ideographic {
	list-style: cjk-ideographic;
}
#demo ol.decimal {
	list-style: decimal;
}
#demo ol.decimal-leading-zero {
	list-style: decimal-leading-zero;
}
#demo ol.georgian {
	list-style: georgian;
}
#demo ol.hebrew {
	list-style: hebrew;
}
#demo ol.hiragana {
	list-style: hiragana;
}
#demo ol.hiragana-iroha {
	list-style: hiragana-iroha;
}
#demo ol.katakana {
	list-style: katakana
}
#demo ol.katakana-iroha {
	list-style: katakana-iroha;
}
#demo ol.lower-alpha {
	list-style: lower-alpha;
}
#demo ol.lower-greek {
	list-style: lower-greek;
}
#demo ol.lower-latin {
	list-style: lower-latin;
}
#demo ol.lower-roman {
	list-style: lower-roman;
}
#demo ol.upper-alpha {
	list-style: upper-alpha;
}
#demo ol.upper-latin {
	list-style: upper-latin;
}
#demo ol.upper-roman {
	list-style: upper-roman;
}
#demo ol.position li.out{
	list-style-position: outside;	
}
#demo ol.position li.in{
	list-style-position: inside;	
}

HTML code

<div id="demo">
  <div class="c2"> 
    <h3>Ordered list styles:</h3>
    <span><strong>circle</strong></span>
    <ul class="circle">
      <li><span>Circle list item</span></li>
      <li><span>Another circle list item</span></li>
    </ul>
    <span><strong>square</strong></span>
    <ul class="square">
      <li><span>Square list item</span></li>
      <li><span>Another square list item</span></li>
    </ul>
    <span><strong>disc</strong> (default)</span>
    <ul class="disc">
      <li><span>Disc list item</span></li>
      <li><span>Another disc list item</span></li>
    </ul>
    <span><strong>none</strong></span>
    <ul class="none">
      <li><span>None list item</span></li>
      <li><span>Another none list item</span></li>
    </ul>
    <span><strong>image</strong></span>
    <ul class="icon">
      <li>Image list item</li>
      <li>Another Image list item</li>
    </ul>
  </div>
  <div class="c3">
    <h3>Unordered list styles:</h3>
    <span><strong>armenian:</strong></span>
    <ol class="armenian">
      <li><span>Ordered list item with armenian style type</strong></li>
      <li><span>Ordered list item with armenian style type</strong></li>
      <li><span>Ordered list item with armenian style type</strong></li>
    </ol>
    <span><strong>cjk-ideographic:</strong></span>
    <ol class="cjk-ideographic">
      <li><span>Ordered list item with cjk-ideographic style type</strong></li>
      <li><span>Ordered list item with cjk-ideographic style type</strong></li>
      <li><span>Ordered list item with cjk-ideographic style type</strong></li>
    </ol>
    <span><strong>decimal:</strong></span>
    <ol class="decimal">
      <li><span>Ordered list item with decimal style type</strong></li>
      <li><span>Ordered list item with decimal style type</strong></li>
      <li><span>Ordered list item with decimal style type</strong></li>
    </ol>
    <span><strong>decimal-leading-zero:</strong></span>
    <ol class="decimal-leading-zero">
      <li><span>Ordered list item with decimal-leading-zero style type</strong></li>
      <li><span>Ordered list item with decimal-leading-zero style type</strong></li>
      <li><span>Ordered list item with decimal-leading-zero style type</strong></li>
    </ol>
    <span><strong>georgian:</strong></span>
    <ol class="georgian">
      <li><span>Ordered list item with georgian style type</strong></li>
      <li><span>Ordered list item with georgian style type</strong></li>
      <li><span>Ordered list item with georgian style type</strong></li>
    </ol>
    <span><strong>hebrew:</strong></span>
    <ol class="hebrew">
      <li><span>Ordered list item with hebrew style type</strong></li>
      <li><span>Ordered list item with hebrew style type</strong></li>
      <li><span>Ordered list item with hebrew style type</strong></li>
    </ol>
    <span><strong>hiragana:</strong></span>
    <ol class="hiragana">

      <li><span>Ordered list item with hiragana style type</strong></li>
      <li><span>Ordered list item with hiragana style type</strong></li>
      <li><span>Ordered list item with hiragana style type</strong></li>
    </ol>
    <span><strong>hiragana-iroha:</strong></span>
    <ol class="hiragana-iroha">
      <li><span>Ordered list item with hiragana-iroha style type</strong></li>
      <li><span>Ordered list item with hiragana-iroha style type</strong></li>
      <li><span>Ordered list item with hiragana-iroha style type</strong></li>
    </ol>
    <span><strong>katakana:</strong></span>
    <ol class="katakana">
      <li><span>Ordered list item with katakana style type</strong></li>
      <li><span>Ordered list item with katakana style type</strong></li>
      <li><span>Ordered list item with katakana style type</strong></li>
    </ol>
    <span><strong>katakana-iroha:</strong></span>
    <ol class="katakana-iroha">
      <li><span>Ordered list item with katakana-iroha style type</strong></li>
      <li><span>Ordered list item with katakana-iroha style type</strong></li>
      <li><span>Ordered list item with katakana-iroha style type</strong></li>
    </ol>
    <span><strong>lower-alpha:</strong></span>
    <ol class="lower-alpha">
      <li><span>Ordered list item with lower-alpha style type</strong></li>
      <li><span>Ordered list item with lower-alpha style type</strong></li>
      <li><span>Ordered list item with lower-alpha style type</strong></li>
    </ol>
    <span><strong>lower-greek:</strong></span>
    <ol class="lower-greek">
      <li><span>Ordered list item with lower-greek style type</strong></li>
      <li><span>Ordered list item with lower-greek style type</strong></li>
      <li><span>Ordered list item with lower-greek style type</strong></li>
    </ol>
    <span><strong>lower-latin:</strong></span>
    <ol class="lower-latin">
      <li><span>Ordered list item with lower-latin style type</strong></li>
      <li><span>Ordered list item with lower-latin style type</strong></li>
      <li><span>Ordered list item with lower-latin style type</strong></li>
    </ol>
    <span><strong>lower-roman:</strong></span>
    <ol class="lower-roman">
      <li><span>Ordered list item with lower-roman style type</strong></li>
      <li><span>Ordered list item with lower-roman style type</strong></li>
      <li><span>Ordered list item with lower-roman style type</strong></li>
    </ol>
    <span><strong>upper-alpha:</strong></span>
    <ol class="upper-alpha">
      <li><span>Ordered list item with upper-alpha style type</strong></li>
      <li><span>Ordered list item with upper-alpha style type</strong></li>
      <li><span>Ordered list item with upper-alpha style type</strong></li>
    </ol>
    <span><strong>upper-roman:</strong></span>
    <ol class="upper-latin">
      <li><span>Ordered list item with upper-latin style type</strong></li>
      <li><span>Ordered list item with upper-latin style type</strong></li>
      <li><span>Ordered list item with upper-latin style type</strong></li>
    </ol>
    <span><strong>upper-roman:</strong></span>
    <ol class="upper-roman">
      <li><span>Ordered list item with upper-roman style type</strong></li>
      <li><span>Ordered list item with upper-roman style type</strong></li>
      <li><span>Ordered list item with upper-roman style type</strong></li>
    </ol>
  </div>
  <div class="c4">
  <h3>List style position: inside vs outside</h3>
  	<ol class="position">
    	<li class="out"><strong>List style position outside</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</li>
        <li class="in"><strong>List style position inside</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ol>
  </div>
  <div class="clear"></div>
</div>