Back Next

CSS List Properties

In HTML, there are two main types of lists:

Main css properties used to style both the lists are:-

The list-style property is a shorthand property means we can set all the list properties in one declaration.

Eg:
<style>
ul
{
list-style: disc inside url("tiny-disc.png");
}
</style>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

It manages the appearance of a list item element. Commonly used list-style-types are given below.

Value (for unordered list- ul)	Description
disc	Default value. Filled circle. Definition: ul { list-style-type: disc; }
circle	Hollow circle. Definition:ul { list-style-type: circle; }
square	Filled square. Definition: ul { list-style-type: square; }
none	No symbols. Definition: ul { list-style-type: none; }

Eg:
<style>
ul
{
list-style-type:circle;
}
</style>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

Eg:
<style>
ol
{
list-style-type:decimal;
}
</style>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>

The list-style-position property specifies the position of the list-item markers such as bullets and numbers.

Value (for ordered list- ol)	Description
inside	Markers will be inside the list item
outside	Markers will be outside the list item

Eg:
<style>
ol
{
list-style-position:inside;
}
</style>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>

The list-style-image property defines a pointer to an image which can be used as a marker instead of bullets.

Eg:
<style>
ul
{
list-style-image: url('greensquare.png');
}
</style>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

Back Next

Begin Web Programming with PHP & MySQL