Learn CSS Lists

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

Property

Description

list-style-type

Specifies the type of list-item marker

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

list-style-position

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).

list-style-image

Specifies an image as the list-item marker>

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

list-style

List-Style

Sets all the properties for a list in one declaration.

style=”list-style: inside square;”

 Example:

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

Leave a Reply