CSS List Styling

link stylingList  is an important element in web design. List can be modified by css list styling properties.

Dear, reader here,i will discuss how to styling list by css property that will be helpful for your better experience in the field of css3.

CSS List are given below:

List may be following three types:

1. Unordered List

2. Ordered List

3. Images List

1. Unordered List:

unordered list item marker are defines in the following way:

ul.x{ list-style-type:square;}

ul.y{ list-style-type: circle; }

For Example:

<html>
<head>
<style>/*internal css*/

ul.x {list-style-type:square;}
ul.y {list-style-type:circle;}

</style>
</head>

<body>
<p>An Example of unordered list:</p>

<ul class=”x”>
<li>Bangladesh</li>
<li>America</li>
<li>India</li>
</ul>

<ul class=”y”>
<li>Australia</li>
<li>Japan</li>
<li>pakistan</li>
</ul>

</body>
</html>

Output of the above code:

list

2. Ordered List

Ordered list item marker are defines in the following way:

ol.x{ list-style-type:numeric;}

ol.y{ list-style-type: upper-roman; }

ol.z{ list-style-type: lower-alpha; }

For Example:

<html>
<head>

<style>
/*internal css*/

ol.x{ list-style-type:numeric;}

ol.y{ list-style-type: upper-roman; }

ol.z{ list-style-type: lower-alpha; }

</style>
</head>

<body>
<h2 class=”style1″>An Example of ordered list:</h2>

<ol class=”x”>
<li>Bangladesh</li>
<li>America</li>
<li>India</li>
</ol>

<ol class=”y”>
<li>Bangladesh</li>
<li>America</li>
<li>India</li>
</ol>
<ol class=”z”>
<li>Australia</li>
<li>Japan</li>
<li>pakistan</li>
</ol>

</body>
</html>

Output of the above code:

ol

3.Images List:

images list item marker are defines in the following way:

ul
{
list-style-image: url(‘circle.jpg’);
}

For Example:

<html>
<head>
<style>
/*internal css*/

ul
{
list-style-image: url(‘circle.jpg’);
}
</style>
</head>

<body>
<h2> An Example of images list:</h2>

<ul >
<li>Bangladesh</li>
<li>America</li>
<li>India</li>
</ul>
</body>
</html>

Output of the above code:

ima

 Related Post or You may interest in the following post: