Published on: 09 August, 2013

CSS List Style

Posted by andy | 1555 views 0 likes 0 favourites 0 comments
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.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.