CSS Lists

The CSS list properties allow you to:

Set different list item markers for ordered list
Set different list item markers for unordered lists
Set an image as the list item marker

Different List Item Markers

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;}

Values for Unordered Lists

Value	Description
none	No marker
disc	Default. The marker is a filled circle
circle	The marker is a circle
square	The marker is a square

Values for Ordered Lists

Value	Description
armenian	The marker is traditional Armenian numbering
decimal	The marker is a number
decimal-leading-zero	The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)

An Image as The List Item Marker

<html>

<head>

{

list-style-image:url('sqpurple.gif');

}

</style>

</head>

<body>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is explained below.

Cross browser Solution

<html>

<head>

{

list-style-type:none;

padding:0px;

margin:0px;

}

{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

</style>

</head>

<body>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

Example explained:

For ul:

Set the list-style-type to none to remove the list item marker
Set both padding and margin to 0px (for cross-browser compatibility)

For li:

Set the URL of the image, and show it only once (no-repeat)
Position the image where you want it (left 0px and down 5px)
Position the text in the list with padding-left

All CSS List Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property	Description	Values
list-style	Sets all the properties for a list in one declaration	list-style-type list-style-position list-style-image inherit
list-style-image	Specifies an image as the list-item marker	URL none inherit
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	inside outside inherit
list-style-type	Specifies the type of list-item marker	none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit

Garima Infotech Solution

Saturday, 8 April 2017

css list