CSS List
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.
List
In HTML, there are two types of lists:
- unordered list - the list items are marked with bullets (typically circles or squares)
- ordered list - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as list
item markers.
Different List Item Markers
It is possible to specify the type of list item marker with the
list-style-type property:
Example
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha} |
Try it yourself »
|
Some of the values are for unordered lists, and some for ordered
lists.
Unordered List - Possible Values
| 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 |
Ordered List - Possible Values
| 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.
Positioning the List
The list-style-position property specifies the indentation of a list.
"outside" is the default value. The "inside" value further
indents the list:
Example
ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside} |
Try it yourself »
|
Using an Image as List Item Marker
It is also possible to use an image as a list item marker:
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
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
} |
Try it yourself »
|
Example explained:
- For ul:
- Set the list-style-type to none to remove the list item marker
- Both padding and margin must be set to 0px for cross-browser compatibility
- For li:
- Set the URL of the image, and show it only once (no-repeat)
- Use the background-position property to place the image where you want
it (left 0px and
down 5px)
- Use the padding-left property to position the text in the list
List - Shorthand property
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":
When using the shorthand property, the order of the values are:
- list-style-type
- list-style-position
- list-style-image
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.
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 |
CSS |
| list-style |
Sets all the properties for
a list in one declaration |
list-style-type
list-style-position
list-style-image
inherit |
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 |
The Altova MissionKit, recent winner of the Jolt Product Excellence and Productivity Award for Best Development Environment,
is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy®, MapForce®, and StyleVision® plus 3 additional tools for less than the price of 2.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|
