5 Useful CSS List Style Tutorial and Example

In this tutorial, we are going to show you how to create beautiful css list style with different type such list style with Sprites Image Background, List Style with Number Circle Background and List Style with Arrow Image. In fact, example css list styles are really useful for web designer to find sample list style to help improve web design interface (UI). Using styling ordered lists was always easy point important articles and make it clear to reader. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.

Ordered List with CSS Counters

A numbered list generated with CSS counters to allow for custom styling.

ordered list with css counters More info / download

List Properties

list propertiesMore info / download

It's tutorial on CSS list style

css list style

Demo download

To learn about web design you should start first with CSS and HTML lessons and tutorials. I also have collection some useful HTML5 lesson and tutorial for Learning HTML5

1. Creating CSS List with Sprites Image Background

CSS Sprites is an technique that use combined the images into one file to make your website loading faster, you can combine an unlimited number of images into one and call those point of images to use by using css style.

Let's go with my tutorial coding css list using spites images bellow:

The Markup Language HTML Source Code :


The Cascading Style Sheets (CSS) list style spites images will have the following code:

/* css list sprites background ------------- */

#listsprites {float:left; margin:0px; font:14px/16px 'lucida grande', tahoma, verdana, arial, sans-serif;}
#listsprites a {border:0; color:#3B5998; text-decoration:none; line-height:30px;}
#listsprites a:hover,
#listsprites a:focus,
#listsprites a:active {text-decoration:underline; background:transparent;}
#listsprites .user {overflow:hidden; margin:0 0 10px;}
#listsprites .user img {float:left; margin:0 8px 0 0;}
#listsprites .user a {display:block;}
#listsprites .fn {padding:3px 0; font-weight:bold;}
#listsprites ul {width:290px; padding:0; margin:0; list-style:none;}
#listsprites li a {display:block; padding:3px 8px 4px 6px;}
#listsprites li a:hover,
#listsprites li a:focus,
#listsprites li a:active {
    -moz-box-shadow: 0px 0px 3px #403f40;
    -webkit-box-shadow: 0px 0px 3px #403f40;
    box-shadow: 0px 0px 3px #403f40;
#listsprites li.current a {font-weight:bold; color:#333; background:#D8DFEA;}

#listsprites li a:before {
    margin:0 6px 0 0;

#listsprites .facebook a:before {background-position:0 -0px;}
#listsprites .twitter a:before {background-position:0 -35px;}
#listsprites .rss a:before {background-position:0 -70px;}
#listsprites .digg a:before {background-position:0 -108px;}
#listsprites .youtube a:before {background-position:0 -148px;}

/* Eng css list sprites background -------------- */

The result:


2. Creating List Style with Number Circle Background

This list style, we used ordered type that it can show number order by level as you want with beautiful Circle background color.

Let's go with my tutorial coding list style with Number Circle Background bellow:

The Markup Language HTML Source Code :


The Cascading Style Sheets (CSS) List Style Number Circle Background will have the following code:

/* css list with numeber circle background -------------- */

.numberlist ol{
	            counter-reset: li;
				list-style: none;
				*list-style: decimal;
				font: 15px 'trebuchet MS', 'lucida sans';
				padding: 0;
				margin-bottom: 4em;

.numberlist ol ol{
				margin: 0 0 0 2em;

.numberlist a{
				position: relative;
				display: block;
				padding: .4em .4em .4em 2em;
				*padding: .4em;
				margin: .5em 0;
				background: #FFF;
				color: #444;
				text-decoration: none;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;

.numberlist a:hover{
				background: #cbe7f8;
.numberlist a:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -1.3em;
				top: 50%;
				margin-top: -1.3em;
				background: #87ceeb;
				height: 2em;
				width: 2em;
				line-height: 2em;
				border: .3em solid #fff;
				text-align: center;
				font-weight: bold;
				-moz-border-radius: 2em;
				-webkit-border-radius: 2em;
				border-radius: 2em;

/* End css list with numeber circle background -------------- */

The Result:


3. Creating List Style with Arrow Image

This one we used unordered list style with arrow images that it is simple and easy to use.

Let's go with my tutorial coding List Style with Arrow Image bellow:

The Markup Language HTML Source Code :


The Cascading Style Sheets (CSS) List Style with Arrow Image will have the following code:

/* css list with arrow images  -------------- */
.imglist ul{
.imglist li{
.imglist li a:link, .imglist li a:visited{

.imglist li a:hover{
    -moz-box-shadow: 0px 0px 12px #9e9ea3;
    -webkit-box-shadow: 0px 0px 12px #9e9ea3;
    box-shadow: 0px 0px 12px #9e9ea3;
    border:none 0px #000000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

/* End css list with arrow images  -------------- */

The Result:


Now! We have 3 beautiful CSS list. Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!

Demo download

Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.