Published on: 09 August, 2013

CSS List Style

Tumblr Digg Google Plus

In this chapter, you will learn how you can apply different list of styles to html list. The html list style usually apply to ul li or ol li tags.

Example of ul li or ol li tags in html.

Html Code Html Display
<ul>
	<li>Product A</li>
	<li>Product B</li>
	<li>Product C</li>
</ul>
        
  • Product A
  • Product B
  • Product C
<ol>
	<li>Product A</li>
	<li>Product B</li>
	<li>Product C</li>
</ol>
            
  1. Product A
  2. Product B
  3. Product C

Here is the available List Properties

Property Syntax Values Example:
list-style-image - url(location of image)
- none
ul li{
    list-style-image:url(images/list.gif) no-repeat;
}
list-style-position - inside
- outside
ul li{
    list-style-position: inside;
}
list-style-type - circle
- decimal
- disc
- lower-alpha
-lower-roman
- square
- upper-alpha
- upper-roman
- none
ul li{
    list-style-type:disc;
}
list-style Combination of list style type, image or position. Note you do not have to include 3 of them, by default you can set at least using 1 property only.
ul li{
    list-style: url(images/list.gif) no-repeat inside;
}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.