Web_Dev_Grad

Lists

CSS List Styles

CSS provides a set of properties to control the appearance of lists (<ul>, <ol>, <li>,) making it easy to customize bullets, positions, and even replace bullet points with images. These are done using the list-style-type, list-style-image, and list-style-position properties.

List Style Type

list-style-type defines the bullet or numbering style for list items. These are the common values.

Value Description
disc Default solid circle used in <ul>.
circle A hollow circle.
square A solid square.
decimal The standard numbers used in <ol>.
decimal-leading-zero Numbers with leading zeros such as 01,02,03.
low-roman or upper-roman Roman numerals in the form of i, ii, iii or I, II, III.
lower-alpha or upper-alpha Lower or upper case letters such as a, b, c or A, B, C.
none No bullet point or number displayed.

The following example gives an idea of the syntax for styling the lists.

Result

  • First thing in square point list.
  • Second thing in square point list.
  • Third thing in square point list.
  1. First thing in capital letter point list.
  2. Second thing in capital letter point list.
  3. Third thing in capital letter point list.
  • First thing in no point list.
  • Second thing in no point list.
  • Third thing in no point list.

HTML

<ul id="square-point-list">
    <li>First thing in square point list.</li>
    <li>Second thing in square point list.</li>
    <li>Third thing in square point list.</li>
</ul>

<ol id="capital-letter-list">
    <li>First thing in capital letter point list.</li>
    <li>Second thing in capital letter point list.</li>
    <li>Third thing in capital letter point list.</li>
</ol>

<ul id="no-bullet-point-list">
    <li>First thing in no point list.</li>
    <li>Second thing in no point list.</li>
    <li>Third thing in no point list.</li>
</ul>

CSS

#square-point-list {
    list-style-type: square;
}

#capital-letter-list {
    list-style-type: upper-alpha;
}

#no-bullet-point-list {
    list-style-type: none;
}

List Style Image

list-style-image allows you to replace the standard bullet with a custom image by providing the URL. list-style-image takes priority but if the image cannot be located, the browser will fallback to the list-style-type. 

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

List Style Position

list-style-position specifies where the bullet or image appears in relation to the list item content. This can take one of two values:

  • outside: This is the default value, the bullet point appears outside the content block and the text aligns normally.
  • inside: The bullet point appears inside the content block, so the text is indented along with the bullet point.

This allows you greater choices when styling your list items by choosing whether or not the bullet points are included.

Result

  • First thing in outside position list.
  • Second thing in outside position list.
  • Third thing in outside position list.
  • First thing in inside position list.
  • Second thing in inside position list.
  • Third thing in inside position list.

HTML

<ul id="outside-position-list">
    <li>First thing in outside position list.</li>
    <li>Second thing in outside position list.</li>
    <li>Third thing in outside position list.</li>
</ul>

<ul id="inside-position-list">
    <li>First thing in inside position list.</li>
    <li>Second thing in inside position list.</li>
    <li>Third thing in inside position list.</li>
</ul>

CSS

#oustide-position-list {
  /* The list-style-positon is outside by default so no need to set it */
}

#inside-position-list {
  list-style-position: inside;
}

/* Put a border around the list items to show how the bullet points react */
#oustide-position-list li
#inside-position-list li {
  border: 1px solid black;
}

List Style Shorthand

You can combine all list styles into a single shorthand property with the following syntax: list-style: [type] [position] [image];. 

ul {
    list-style: square inside url('custom-bullet.png');
}

If any value is omitted, the default will be used for that property.