Home > DeveloperSection > Articles > List Property using CSS3

List Property using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1788  View(s)
Rate this:

List Property using CSS3

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 Property using CSS3

  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 Property using CSS3

 

list-style-type:circle:

This line will make a Circle type of bullet in the application.

Below is output

List Property using CSS3

list-style-type:square:

This line will make a square type of bullet in the application.

Below is output

List Property using CSS3

   list-style-type: upper-roman :

This line will make a roman type of bullet in the application.

Below is output

List Property using CSS3

 

List-style-type: lower-alpha:

This line will make lower alphabetic type of bullet in the application.

Below is output

List Property using CSS3


Don't want to miss updates? Please click the below button!

Follow MindStick