CSS Lists


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

There are following five CSS properties which can be used to control lists:

Property Purpose
list-style Specifies all the properties for a list in one declaration
list-style-position Specifies the marker should appear in relation to the text
list-style-image Specifies an image for the marker rather than a bullet point or number
list-style-type Control the shape or appearance of the marker

List Style

The list-style shorthand property sets all the list properties in one declaration.

The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image.

Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Example

ol {
   list-style:circle url("circle.png");
   }

List Style Position

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points.

ValueDescription
noneNA
insideIf the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
outsideIf the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Example

 <html>
    <body>
        <ul style="list-style-type:circle; list-style-position:outside;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ul>
        
        <ul style="list-style-type:square; list-style-position:inside;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ul>
        
        <ol style="list-style-type:decimal; list-style-position:outside;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
        
        <ol  style="list-style-type:alpha; list-style-position:inside;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
     </body>
  </html>
Output
  • Maths
  • Social Science
  • Physics
  • Maths
  • Social Science
  • Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics

List Style Type

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists, and the style of numbering characters in ordered lists.

Here are the values which can be used for an unordered list:

ValueDescription
noneNA
disc (default)A filled-in circle
circleAn empty circle
squareA filled-in square

Here are the values which can be used for an ordered list:

ValueDescriptionExample
decimalNumber1,2,3,4,5
decimal-leading-zero0 before the number01, 02, 03, 04, 05
lower-alphaLowercase alphanumeric charactersa, b, c, d, e
upper-alphaUppercase alphanumeric charactersA, B, C, D, E
lower-romanLowercase Roman numeralsi, ii, iii, iv, v
upper-romanUppercase Roman numeralsI, II, III, IV, V
lower-greekThe marker is lower-greekalpha, beta, gamma
lower-latinThe marker is lower-latina, b, c, d, e
upper-latinThe marker is upper-latinA, B, C, D, E
hebrewThe marker is traditional Hebrew numbering
armenianThe marker is traditional Armenian numbering
georgianThe marker is traditional Georgian numbering
cjk-ideographicThe marker is plain ideographic numbers
hiraganaThe marker is hiragana a, i, u, e, o, ka, ki
katakanaThe marker is katakanaA, I, U, E, O, KA, KI
hiragana-irohaThe marker is hiragana-irohai, ro, ha, ni, ho, he, to
katakana-irohaThe marker is katakana-irohaI, RO, HA, NI, HO, HE, TO

Example

<html>
    <body>
        <ul style="list-style-type:circle;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ul>
        
        <ul style="list-style-type:square;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ul>
        
        <ol style="list-style-type:decimal;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
        
        <ol style="list-style-type:lower-alpha;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
        
        <ol style="list-style-type:lower-roman;">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
     </body>
  </html>
Output
  • Maths
  • Social Science
  • Physics
  • Maths
  • Social Science
  • Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics

List Style Image

The list-style-image Specifies an image for the marker rather than a bullet point or number.

Example

<!DOCTYPE html>
   <html>
    <body>
        <ul style=" list-style-image:url(image/css/aro.png);">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ul>
        
        <ol style=" list-style-image:url(image/css/aro.png);">
        <li>Maths</li>
        <li>Social Science</li>
        <li>Physics</li>
        </ol>
       
     </body>
  </html>
Output
  • Maths
  • Social Science
  • Physics
  1. Maths
  2. Social Science
  3. Physics

Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

Example

ul {
   list-style-type:none;
   padding:0;
   margin:0;
   }   
   ul li {
   background-image:none;
   background-repeat:no-repeat;
   background-position:0px center;
   padding-left:15px;
   }

Example explained:

  • 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

Share this article on