Latest web development tutorials

CSS style list (ul)

CSS List Properties role is as follows:

  • Set different list item is marked as an ordered list
  • Set different list item is marked as an unordered list
  • Set list item marker image

List

In HTML, there are two types of lists:

  • Unordered list - list items are marked with special graphic (such as black specks, small boxes, etc.)
  • Ordered list - the list items are marked with numbers or letters

With CSS, you can list the style further, and can make an image list item marker.

Different list item marker

list-style-type attribute specifies the type of list item marker is ::

Examples

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

try it"

Some values ​​are unordered lists, and some is an ordered list.

As the image list item marker

To specify the image list item marker, use the list-style-image property:

Examples

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

try it"

The above example shows not the same in all browsers, IE and Opera display the image tags than Firefox, Chrome and Safari a little bit higher.

If you want to place the same image of the logo in all browsers, you should use a browser compatibility solutions, as follows

Browser Compatibility Solutions

Also in all browsers, the following example will show the image tag:

Examples

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

try it"

Example explained:

  • ul:
    • Set the list-style-type is not to delete the list item marker
    • Setting padding and margin 0px (browser compatibility)
  • All ul li:
    • Set the URL of the image, and set it only appears once (no repeat)
    • You need to locate the image position (left 0px and a vertical 5px)
    • With padding-left attribute to the text in the list

List - shorthand property

You can specify a list of all the properties in a single property. This is called a shorthand property.

Use abbreviations property to the list, a list of style attributes are set as follows:

Examples

ul
{
list-style: square url("sqpurple.gif");
}

try it"

If you use the shorthand property value of the order is:

  • list-style-type
  • list-style-position (for instructions, see the following CSS attribute table)
  • list-style-image

If these values ​​are missing one of the remaining order is still specified, it does not matter.

Examples

More examples

All different list item marker
This example demonstrates all the different CSS list item marker.

All CSS List Properties

Attributes description
list-style Shorthand property. For a list of all the properties is provided in a statement
list-style-image The image is set to sign a list of items.
list-style-position Set the position in the list the list item marker.
list-style-type Set the type of list item flag.