CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two primary list types:

1. Unordered lists (<ul>) – list items are marked with bullets.
2. Ordered lists (<ol>) – list items are marked with numbers or letters.

CSS list properties enable you to:

1. Customize list item markers for ordered lists.
2. Customize list item markers for unordered lists.
3. Utilize images as list item markers.
4. Apply background colors to lists and list items.

Different List Item Markers

The list-style-type property determines the style of the marker used for list items.

Below is an example showcasing a variety of available list item markers:

Example

Please note: Certain values correspond to unordered lists, while others are for ordered lists.

An Image as The List Item Marker

The list-style-image property allows you to designate an image as the marker for list items.

Example

Position The List Item Markers

The list-style-position property determines the placement of list item markers (bullet points).

When set to “list-style-position: outside;”, the bullet points will appear outside the list item, and the start of each line of a list item will be vertically aligned. This is the default behavior.

• Coffee – A brewed drink prepared from roasted coffee beans…
• Tea
• Coca-cola

When specified as “list-style-position: inside;”, the bullet points will be positioned inside the list item. This means they are considered part of the list item’s text, causing the text to be pushed at the beginning accordingly.

• Coffee – A brewed drink prepared from roasted coffee beans…
• Tea
• Coca-cola

Example

Remove Default Settings

The list-style-type: none property is utilized to eliminate markers or bullets from lists. It’s important to note that lists also have default margin and padding. To remove these defaults, apply margin:0 and padding:0 to <ul> or <ol>.

Example

List – Shorthand property

The list-style property serves as a shorthand for setting all list properties in a single declaration.

Example

When employing the shorthand property, the order of property values is as follows:

1. list-style-type: Specifies the type of list item marker.
2. list-style-position: Determines if the list-item markers should be positioned inside or outside the content flow.
3. list-style-image: Designates an image as the list item marker.

If any of the above property values are omitted, the default value for the missing property will be applied, if available.

Styling List With Colors

You can enhance the appearance of lists by applying colors, adding visual interest to them.

Styles applied to the <ol> or <ul> tag will affect the entire list, while properties added to the <li> tag will impact individual list items.

Example

Result:

All CSS List Properties