CSS Lists
List actually used to show and manage items that are may be in order or in unordered form.Syntax:
list-style-property:value;
Property includes=>>image,position,type
Properties of Lists:
list-style
list-style-type
list-style-position
lit-style-image
Examples:
list-style:none;
list-style-type:circle;
list-style-position:inside;
lit-style-image:url('smile.jpg');
List Style Image
This property is used to display image as style.
Syntax:
list-style-image:url('path of image.extention');
Extension Includes=>>jpg,png,gif etc.
Example:
list-style-image:url("D://images/butterfly.jpg");
How to use this property?
<html>
<head>
<style>
ul{
list-style-image:url("D://images/butterfly.jpg");
}
</style>
</head>
<body>
<ul>Position
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>
Outcome:This will print a simple list.
List Style Type
This property is used to display different bullet style with list items.
Syntax:
list-style-type:value;
value includes For unorder list=>>circle,square,disc,fillround,none etc.
value includes For order list=>>upper-alpha,lower-alpha,upper-roman,lower-roman,decimal,lower-latin,upper-latin,none etc.
Example:
list-style-type:square;
How to use this property?
<html>
<head>
<style>
ul{
list-style-type:circle;
}
ol{
list-style-type:decimal;
}
</style>
</head>
<body>
<ul>Position
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
Outcome:This will display simple order and unorder list.
List Style Position
List style position is used to set the position of list like inside or outside etc.
Syntax:
list-style-position:value;
value includes ==>>inside,outside,inherit,initial etc.
Example:
list-style-type:inside;
How to use this property?
<html>
<head>
<style>
ul{
list-style-type:circle;
list-style-position:outside;
}
ol{
list-style-type:decimal;
list-style-position:inside;
}
</style>
</head>
<body>
<ul>Position
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
Outcome:This will display simple ordered and unorder list with inside and outside position.
Shorthand Property For List
Syntax:
list-style:type position image;
type=>>square,circle,lower-alpha,decimal etc,
position=>>inside,outside,inherit etc.
Example:
list-style:circle inside url("pattern.png");
