In this Article I am explaining the List property using CSS3.
List Property is used for arranging information in lists can make it much easier to understand. List is like bullet and numbering in MS Word.
The below code make all types of list in your application:
<!DOCTYPE html>
<html>
<head>
<style>
ul.in
{
list-style-position:inside;
color: #cF6600;
}
ul.out
{
list-style-position:outside;
color: #cF6600;
}
ul.image
{
list-style-image:url('1.png');
color: #cF6600;
}
ul.circle
{
list-style-type:circle;
color: #cF6600;
}
ul.square
{
list-style-type:square;
color: #cF6600;
}
ol.roman
{
list-style-type:upper-roman;
color: #cF6600;
}
ol.alpha
{
list-style-type:lower-alpha;
color: #cF6600;
}
p
{
color: #616191;
font-weight:Bold;
}
</style>
</head>
<body>
<p>This list position is : inside:</p>
<ul class="in">
<li>
ASP.NET- Web Application.
</li>
<li>
ADO.NET - Desktop Application.
</li>
</ul>
<p> This list position is : outside:</p>
<ul class="out">
<li>
ASP.NET- Web Application.
</li>
<li>
ADO.NET - Desktop Application.
</li>
</ul>
<p>This list bullet using image:</p>
<ul class ="image">
<li>mindstick INDIA</li>
<li>mindstick USA</li>
</ul>
<p>This list bullet using Circle:</p>
<ul class ="circle">
<li>mindstick INDIA</li>
<li>mindstick USA</li>
</ul>
<p>This list bullet using Square:</p>
<ul class ="square">
<li>mindstick INDIA</li>
<li>mindstick USA</li>
</ul>
<p>This list bullet using Roman: </p>
<ol class ="roman">
<li>mindstick INDIA</li>
<li>mindstick USA</li>
</ol>
<p>This list bullet using Alpha:</p>
<ol class ="alpha">
<li>mindstick INDIA</li>
<li>mindstick USA</li>
</ol>
</body>
</html>
list-style-position: inside
This line will work for list position, in this property I will set the value as inside.
list-style-position: outside
This is also work for list position, in this property I will set the value as outside. And outside value make the list in my application is outside
Below is output:
List-style-image: url (image path):
This line will make image able bullet in the application URL is provide the path of that image which is make as bullet.
Below is output
list-style-type:circle:
This line will make a Circle type of bullet in the application.
Below is output
list-style-type:square:
This line will make a square type of bullet in the application.
Below is output
list-style-type: upper-roman :
This line will make a roman type of bullet in the application.
Below is output
List-style-type: lower-alpha:
This line will make lower alphabetic type of bullet in the application.
Below is output
Leave Comment