Using the list-style-type property
if a group of list items is marked with symbols,
such as bullets, the symbols are called list items makers.
in CSS different types of list item markers are available for ordered and unordered lists.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
ul.d {list-style-type:square;}
ol.u {list-style-type:upper-roman;}
</STYLE>
</HEAD>
<BODY>
<P>Unordered list item marker :</P>
<UL class="d">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</UL>
<P>Ordered list item marker:</P>
<OL class="u">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</OL>
</BODY>
</HTML>
if a group of list items is marked with symbols,
such as bullets, the symbols are called list items makers.
in CSS different types of list item markers are available for ordered and unordered lists.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
ul.d {list-style-type:square;}
ol.u {list-style-type:upper-roman;}
</STYLE>
</HEAD>
<BODY>
<P>Unordered list item marker :</P>
<UL class="d">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</UL>
<P>Ordered list item marker:</P>
<OL class="u">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</OL>
</BODY>
</HTML>
Using the list-style-image property
apart from different list item markers, such as circle and lower-alpha you can also use an image as a list item marker.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
body{background-color: aquamarine}
ul
{
list-style-image: url('orange_bullet.gif');
}
h3{color: blueviolet}
</STYLE>
</HEAD>
<BODY>
<H3>Furniture list</H3>
<UL>
<LI>Chair</LI>
<LI>Table</LI>
<LI>Dining table</LI>
<LI>Dressing table</LI>
<LI>Bed</LI>
<LI>Sofa set</LI>
</UL>
</BODY>
</HTML>
Using the list-style-position property
In CSS, you can specify the position of list item markers in the lists by using the list-style-position property.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
ul.in {list-style-position:inside;border:5px dashed red;}
ul.out {list-style-position:outside;border:5px dashed red;}
</STYLE>
</HEAD>
<BODY>
<P>The list items with position value inside:</P>
<UL class="in">
<LI>item 1</LI>
<LI>item 2</LI>
<LI>item 3</LI>
</UL>
<P>The list items with position value outside:</P>
<UL class="out">
<LI>item 1</LI>
<LI>item 2</LI>
<LI>item 3</LI>
</UL>
</BODY>
</HTML>
Using the list-style shorthand property
the list-style shorthand property defines the shortcuts to set various list-style properties, which include
list-style-type,
list-style-image,
list-style-position
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
ul.u1{background-color:greenyellow;list-style:url('orange_bullet.gif');}
li.l1{list-style:lower-greek;}
</STyLE>
</HEAD>
<BODY>
<ul class="u1">
<li>Milk
<ul>
<li class="l1">Goat</li>
<li class="l1">Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li class="l1">Free-range</li>
<li class="l1">Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li class="l1">Smelly</li>
<li class="l1">Extra smelly</li>
</ul>
</li>
</ul>
</BODY>
</HTML>
Creating Horizontal Lists
to create a horizontal list by using the list-style-type property
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
ul{color:red;
margin: 0;
padding: 0;
list-style-type: none;}
ul li { display: inline; }
body{background-color:lightseagreen;}
</STYLE>
</HEAD>
<BODY>
<IMG src="products.gif">
<UL>
<LI><A href="#">Milk</A></LI>
<LI><A href="#">Eggs</A></LI>
<LI><A href="#">Cheese</A></LI>
<LI><A href="#">Vegetables</A></LI>
<LI><A href="#">Fruit</A></LI>
</UL>
</BODY>
</HTML>
unordered list is created by specifying its list-style-type property as none.
then, the li elements of this unordered list are set in the inline style by using the display property.
No comments:
Post a Comment