Online: 17172
Online: 17172
Online: 17172
Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
There are different types of lists they are ordered list and numbered list
<p>Bullet lists with style</p>
<ol style="list-style-type:circle">
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
In the above code snippet we have list style as circle which defines the list with circle
output
Square in the list box is used to add the square box shape to the lists
<p>Bullet lists with square</p>
<ol style="list-style-type:square">
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
In the above code snippet we have list style as square which defines the list with square
output
Upper roman numbers in the lists creates the list with roman numbers in upper case letters
<p>Lists with upper roman</p>
<ol style="list-style-type:upper-roman">
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
In the above code snippet we have list style as upper roman which defines the list with upper roman
output
Lower roman numbers in the lists creates the list with roman numbers in lower case letters
<p>Lists with Lower roman</p>
<ol style="list-style-type:lower-roman">
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
In the above code snippet we have list style as lower roman which defines the list with lower roman numbers
output
by using greeks in the lists, it adds the style alpha, bet and gamma values in the list
<p>Lists with Lower greek</p>
<ol style="list-style-type:lower-greek">
<li>Orange</li>
<li>Mango</li>
<li>Apple</li>
</ol>
In the above code snippet we have defined the lists with lower greek which defines the lists with alpha, beta and gamma values
output
Image in the lists are uses to create the image to the lists
<style>
ul {
list-style-image:url('tumb.jpg');
}
</style>
</head>
<body>
<ul>
<li>mango</li>
<li>techfunda</li>
<li>orange</li>
</ul>
</body>
In the above code snippet we have defined the list with image we have taken the image in ul and we have given the li values in the ul, where the image in the ul applies for all the values in the li
output
Style position in the list creates the list inside or outside of the content of the webpage
<style>
ul.a {
list-style-position:inside;
}
ul.b{
list-style-position:outside;
}
</style>
</head>
<body>
<p> lists with inside and outside </p>
<ul class="a">
<li>mango</li>
<li>apple</li>
<li>orange</li>
</ul>
<ul class="b">
<li>techfunda</li>
<li>dotnetfunda</li>
<li>itfunda</li>
</ul>
</body>
In the above code snippet we have define the lists style position to define inside or out side of the content
ul.a("inside") = It defines the content inside ul.b("ouitside") =It defines the outside the contentoutput
Disc shape in the list creates the disc shape or circle with dark black color to the list
<p><i>Lists with disc shape </i></p>
<ul style="list-style:disc">
<li>mango</li>
<li>banana</li>
</ul>
In the above code snippet we have defined the lists with disc defines the lists with disc shape
output
