CSS List


The effect of CSS list properties is as follows:

  • Set different list items to be marked as ordered list

  • Set different list items to be marked as unordered list

  • Set the list item to be marked as an image


List

In HTML, there are two types of lists:

  • Unordered list ul -special graphics for marking list items (such as small black dots, small boxes, etc.)

  • Ordered list ol -list items are marked with numbers or letters

Using CSS, further styles can be listed, and images can be used as list item markers.

The unordered list looks like this:

  • Coffee

  • Tea

  • Coca Cola

  • Coffee

  • Tea

  • Coca Cola

The ordered list is as follows:

    1. Coffee

    2. Tea

    3. Coca Cola

    1. Coffee

    2. Tea

    3. Coca Cola


Different List Item Tags

The list-style-type attribute specifies the type of list item mark:

Example

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 are ordered lists.

The following is a list-style-typedescription of the common property value of the property:

  • noneDo not use bullets

  • discFilled circle

  • circleHollow circle

  • squareSolid square

  • decimalArabic numerals 

  • lower-alphaLowercase English letters 

  • upper-alphaUppercase English letters 

  • lower-romanLowercase roman numerals 

  • upper-romanUppercase roman numerals


Image Marked as List Item

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

Example

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

 Try It! 

The above example displays differently in all browsers. IE and Opera display image tags a little bit higher than Firefox, Chrome and Safari.

If you want to place the same image logo on all browsers, you should use the browser compatibility solution, the process is as follows

Browser Compatibility Solution

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

Example

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 explanation:

  • ul:

    • Set the list type to no list item mark

    • Set padding and margins to 0px (browser compatibility)

  • All li in ul:

    • Set the URL of the image and set it to be displayed only once (no repetition)

    • Position of the positioning image you need (left 0px and top and bottom 5px)

    • Use the padding-left property to put the text in the list


List - Shorthand Properties

All list attributes can be specified in a single attribute. This is the so-called shorthand attribute.

Use shorthand properties for lists, and set the list style properties as follows:

Example

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


The following attributes can be set in order:

  • list-style-type

  • list-style-position (For instructions, please refer to the CSS property table below)

  • list-style-image

If one of the above values is missing and the rest are still in the specified order, it does not matter.


Examples

More Examples

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


Remove Default Settings

The list-style-type: none attribute can be used to remove small marks. List <ul> or <ol> also set default and padding the padding can be used margin:0, and padding:0to remove:

Example

ul 
{
  list-style-type: none;  
  margin: 0;  
  padding: 0;
}



All CSS List Properties

PropertyDescription
list-styleShorthand attribute. Used to set all the attributes used in the list in one declaration
list-style-imageSet the image as the list item flag.
list-style-positionSet the position of the list item flag.
list-style-typeSet the type of list item flag.