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:

• none: Do not use bullets
  

• disc: Filled circle
  

• circle: Hollow circle
  

• square: Solid square
  

• decimal: Arabic numerals 
  

• lower-alpha: Lowercase English letters 
  

• upper-alpha: Uppercase English letters 
  

• lower-roman: Lowercase roman numerals 
  

• upper-roman: Uppercase 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.

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