Styling Lists Using CSS

Like other items, there are some CSS properties to design and style HTML Lists too.
CSS List Properties allow you to :

1. Set different list item markers for ordered lists
2. Set different list item markers for unordered lists
3. Set an image as list item marker

There are two types of lists in HTML:

1. Ordered Lists - The list items are marked with numbers or alphabets
2. Unordered Lists - The list items are marked with bullets

With CSS list items can be styled further. An image can be used as list item marker.

The type of list item marker is specified by list-style-type property:

ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; }

Example: http://css3wdesign.net16.net/list-item-markers.html

An Image as the List Item Marker

CSS allows us to use any image as the list item marker. Just use the list-style-image instead of list-style-type, and place the URL before :

ul { list-style-image: url('sqblue.gif'); }

Example: http://css3wdesign.net16.net/image-marker.html

In the above mentioned example, the image is slightly bigger than the usual bullet. The image specified as the image marker, will be slightly more bigger in IE and Opera than the image in Safari, Chrome and Firefox.
To overcome this, you have to specify all of the image attributes independently. Below is a Crossbrowser solution for this:

Crossbrowser solution

The below code will show the image marker in all browsers equally:

ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqblue.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }

Try using this URL in all browsers: http://css3wdesign.net16.net/image-marker2.html

Explained example:

• For ul: 
• to remove the list item marker first, set the list-style-type to none
• set the margin to 0 (for crossbrowser compatibility) 
• For ul li 
1. place URL of image in the background-image property and set it to the no-repeat
2. specify the image position using background-position (left 0px and down 5px)
3. position the text in the list item: padding-left 

list-style: none;

Sometime, we don't need to specify any of the list-item style. CSS also allows to do so.

Use the list-style: none;

 and the list will be without any style. Below is the output of the list-style: none; 

Item one
Item two
Item three
Item four




Here is the list of all values, which can be used in list-style-type. 

http://css3wdesign.blogspot.com/2014/09/css-list-style-type-property-all-values.html

• email
• facebook
• linkedin
• twitter
• reddit
• google+

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +