CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Lists

Unordered List

  • Delhi
  • Bengaluru
  • Mumbai
  • Delhi
  • Bengaluru
  • Mumbai

Ordered List

  1. Delhi
  2. Bengaluru
  3. Mumbai
  1. Delhi
  2. Bengaluru
  3. Mumbai

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

Lists are very helpful in conveying a set of either numbered or bullet points.

This chapter teaches you how to control list type, position, style, etc., using CSS.


The list-style-type Property

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

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

Run code

Here are the values which can be used for an unordered list (<ul>):

Value Description
none No marker will be shown
disc (default) A filled-in circle
circle An empty circle
square A filled-in square


The list-style-image Property

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

  • Delhi
  • Bengaluru
  • Mumbai
Run code

The list-style-position Property

The list-style-position property specifies the position of the marker relative to a list item.

list-style-position: outside; means that the marker will be outside the list item (This is default):

  • Delhi
  • Benguluru
  • Mumbai

list-style-position: inside; means that the marker will be inside the list item:

  • Delhi
  • Benguluru
  • Mumbai
Run code

List - Shorthand property

The list-style property is a shorthand that sets the following properties in a single declaration:

Run code

Remove Default Style

The following example shows how you can remove default list styles from a list:

Run code

Horizontal List

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

The following example shows how to change the layout of list group items from vertical to horizontal:

Run code

Colored Bullets

The following example shows how you can change color of the list bullets:

Run code

Colored List Numbers

The following example shows how you can change color of the list numbers:

Run code

Icons in a List

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

  • List icons can
  • be used to
  • replace bullets
  • in lists
Run code

To learn more about Font Awesome icons, visit our Font Awesome tutorial.


CSS List properties

Property Description
list-style A shorthand that sets the list-style-type, list-style-position and list-style-image in a single declaration
list-style-image Specifies an image for the marker rather than a bullet point or number
list-style-position Specifies the position of the marker relative to a list item
list-style-type Specifies the type of marker for the list-items