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:

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:

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

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

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

  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.