Learn CSS Lists

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




Specifies the type of list-item marker

(decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-roman| upper-roman)


Specifies if the list-item markers should appear inside or outside the content flow .

Inside: If 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.

Outside: If 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).


Specifies an image as the list-item marker>

list-style-image: url(/images/demo.gif)



Sets all the properties for a list in one declaration.

style=”list-style: inside square;”


<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>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:lower-alpha;list-style-position:inside;”> <li>Maths</li>
<li>Social Science</li> <li>Physics</li> </ol>

Leave a Reply