CSS List Style

andy - 09 Aug, 2013 4085 Views 0 Comment

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
	<li>Product A</li>
	<li>Product B</li>
	<li>Product C</li>
  • Product A
  • Product B
  • Product C
	<li>Product A</li>
	<li>Product B</li>
	<li>Product C</li>
  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
- square
- upper-alpha
- upper-roman
- none
ul li{
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;


There are no comments available.

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

Related Blogs

How to style pagination links with CSS?

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.

Optimizing your site for printing

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 ...

Related Tutorials

CSS Z-Index

z-index is a css property that allows to position an object/element in front/behind of other elements.

What is CSS?

CSS stands for Cascading Style Sheet and is used to define of how the html elements displayed.

CSS Colors

Learn how you can can style text in different colors.