CSS - LISTS

Definition:

Lists are useful for conveying a set of either numbered or bulleted points.

Properties:

We have the following five CSS properties.

1. list-style-type
2. list-style-position
3. list-style-image
4. list-style
5. mmmarker-offset

The list-style-type Property

The list-style-type property allows you to control the shape or style or appearence of a bullet

point (marker) in unordered lists and in the style of numbering in ordered lists.

Following are the values, used for an unordered list:

Value Description

disc (default) A filled-in circle

Circle An empty circle

Square A filled-in square

Following are the values, used for an ordered list:

Value Description Example

Decimal Number 1,2,3

decimal-leading- 0 before the number 01,02,03

zero

lower-alpha Lowercase alphanumeric a,b,c

characters

upper-alpha Uppercase alphanumeric A,B,C

characters
lower-roman Lowercase Roman numerals i,ii,iii

upper-roman Uppercase Roman numerals I,II,III

lower-greek Marker is lower-greek alpha, beta, gamma

lower-latin Marker is lower-latin

upper-latin Marker is upper-latin

hiragana The marker is hiragana

Example:

<ul style="list-style-type:circle;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ul style="list-style-type:square;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ol style="list-style-type:decimal;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

<ol style="list-style-type:lower-alpha;">

<li>Onion</li>
 <li>Tomato</li>

<li>Potato</li>

</ol>

<ol style="list-style-type:upper-roman;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

Output:

The list-style-position Property

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

Following are the two values:

Value Description

inside If the text goes onto a second line, the text will wrap underneath the marker.

outside If the text goes onto a second line, the text will be aligned with the start of the first
line

Example:

<ul style="list-style-type:circle; list-stlye-position:outside;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ul style="list-style-type:square;list-style-position:inside;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ol style="list-style-type:upper-romanl;list-stlye-position:outside;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

<ol style="list-style-type:lower-alpha;list-style-position:inside;">

<li>Onion</li>
 <li>Tomato</li>

<li>Potato</li>

</ol>

Output:

The list-style-image Property

The list-style-image is used to specify an image so that you can use your own bullet style.

Value:

url starting the value of the property followed by the URL in brackets. If it does not find the
given image then default bullets are used.

Example:

<ul>
 <li style="list-style-image: url(sqpurple.gif);">Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ol>

<li style="list-style-image: url(sqpurple.gif);">Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

Output:

The list-style Property

The list-style is used to specify all the list properties into a single expression.

Example:

<ul style="list-style: outside desc;">

<li>Onion</li></li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ol style="list-style: inside lower-alpha;">

<li>Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

<ol>

<li style="list-style-image: url(sqpurple.gif);">Onion</li>

<li>Tomato</li>

<li>Potato</li>

</ol>

Output:
The marker-offset Property

The marker-offset property allows you to specify the distance between the marker and the text
which is relating to that marker.

Value:

Length.

Example:

<ul style="list-style: outside desc; marker-offset:2cm;">

<li>Onion</li></li>

<li>Tomato</li>

<li>Potato</li>

</ul>

<ol style="list-style: inside lower-alpha; marker-offset:2cm;">

<li>Onion</li>
<li>Tomato</li>

<li>Potato</li>

</ol>

Output: