CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

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

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items
  • Different List Item Markers

    The list-style-type property specifies the type of list item marker.

    The following example shows some of the available list item markers:

    Example

    Output :

    An Image as The List Item Marker

    The list-style-image property specifies an image as the list item marker:

    Example

    Here, we want to use a font named "Trirong" from Google Fonts:

    Output :

    Position The List Item Markers

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

    Example

    Output :

    Remove Default Settings

    The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

    Example

    Output :

    Styling List With Colors

    We can also style lists with colors, to make them look a little more interesting.

    Anything added to the <ul> or <ol> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:

    Example

    Output :