CSS Lists

In CSS, HTML Lists can be styled with the list properties.
We are going to learn about how to style these list types:

  1. ordered list
  • unordered list
  • list with image

List Types

There are two (2) types of list in HTML:

  • unordered lists (<ul>) - the list items are marked with bullets.
  • ordered lists (<ol>) - the list items are marked with either numbers, letters or roman numerals.

With CSS, lists can be styled in different ways such as using discs or images as the list-item marker.

List Item Markers

The type of list item marker is specified with the list-style-type property:

See Examples

Using Image as a List Item Marker

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

ul {
  list-style-image: url(square-mark.png);
}

  Do It Yourself

[bil] Browser Issues
  • The image marker does not display equally in all browsers.
  • It is was discovered that Internet Explorer and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.

We have provided a cross-browser solution for you.

[bis] Cross-Browser Solution

The following examples display the image-marker equally in all browsers:

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

ul li {
background-image: url(square-mark.png);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}

Explanation

  • For <ul>: Set the list-style-type to none to remove the list item marker Set both padding and margin to 0px (for cross-browser compatibility)
  • For all <li> in <ul>: Set the URL of the image, and show it only once (no-repeat) Position the image where you want it (left 0px and vertical value: center) Position the text in the list with padding-left

List - Shorthand property

The shorthand property for styling the lists is the list-style property. It can be used to set all of the lists' properties in a single declaration.

ul {
list-style: square inside url(square-mark.png);
}

  Do It Yourself

When using the shorthand property, the order of the property values are:

  • list-style-type (this will be displayed if a list-style-image is not specified, or the image could not be loaded)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS List Styling is all about.
  • You should be able to identify the four (4) states of styling links.
  • You should be able to style a link using the common ways.