Visitors: , Visitors Today: 
The CSS list properties allow you to place the list item marker, change between different list item markers, or set an image as the list item marker.
In HTML, there are two types of lists:
With CSS, lists can be styled further, and images can be used as list item markers.
It is possible to specify the type of list item marker with the list-style-type property:
Example
|
Some of the values are for unordered lists, and some for ordered 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 |
| Value | Description |
|---|---|
| none | No marker |
| circle | The marker is a circle |
| disc | The marker is a filled circle. This is default |
| square | The marker is a square |
| 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.) |
Internet Explorer does not
support all property values for ordered lists.
The list-style-position property specifies the indentation of a list.
"outside" is the default value. The "inside" value further indents the list:
Example
|
It is also possible to use an image as a list item marker:
Example
|
The example above will not show the exact same result in all browsers. IE and Opera will display the images slightly higher than in Firefox, Chrome, and Safari.
The example above will be fine for most occasions. However, there is a way to position the image more precisely.
For the same result in all browsers, you will have to use a background image on each list item, like this:
Example
|
Example explained:
It is possible to specify all the list properties in a single property. This is called a shorthand property.
The shorthand property for list is "list-style":
Example
|
When using the shorthand property, the order of the values are:
It does not matter if one of the values above are missing, as long as the rest are in the specified order.
|
|
More Examples |
The
different list-item markers in lists
This example demonstrates the
different list-item markers in CSS.
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Property | Description | Values | CSS |
|---|---|---|---|
| list-style | Sets all the properties for a list in one declaration | list-style-type list-style-position list-style-imageinherit |
1 |
| list-style-image | Specifies an image as the list-item marker | URL none inherit |
1 |
| list-style-position | Specifies where to place the list-item marker | inside outside inherit |
1 |
| 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 |
1 |
Copyright © 2011 - All Rights Reserved - Softron.in
Template by Softron Technology