×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS List



As earlier also we have discussed in HTML part that mainly we are having two types of list wich are as follows :-


  • Unordered List
  • Ordered List



Here by CSS we can set different list item makers for ordered list or unordered list , and can set image as list item maker and can give background-color to the list as well as list items by the following ways :-




list-style-type


Here by this property we can specify the type property of list item maker whether it is ordered list property or unordered list property by its property values.



Let's understand this by taking an example:-



<!DOCTYPE html>

<html>

<head>

<style>

.main{ list-style-type:circle; }

.look{ list-style-type:square; }

.choose{ list-style-type:lower-roman; }

.cream{ list-style-type:upper-roman; }

</style>

</head>

<body>

<div>

<p> List of fruits </p>

<ul class="main">

<li> Mango </li>

<li> Apple </li>

<li> Grapes </li>

</ul>

</div>


<div>

<p> List of vegetables </p>

<ul class="look">

<li> Potato </li>

<li> Carrot </li>

<li> Cabbage </li>

</ul>

</div>


<div>

<p> List of juice </p>

<ul class="cream">

<li> Mango juice </li>

<li> Apple juice </li>

<li> Lemon juice </li>

</ul>

</div>


<div>

<p> List of ice-cream </p>

<ul class="cream">

<li> Vanila ice-cream </li>

<li> Chocolate ice-cream </li>

<li> Strawberry ice-cream </li>

</ul>

</div>


</body>

</html>



Output of the Program





List of fruits

  • Mango
  • Apple
  • Grapes

List of vegetables

  • Potato
  • Carrot
  • Cabbage

List of juice

  1. Mango juice
  2. Apple juice
  3. Lemon juice

List of ice-cream

  1. Vanila ice-cream
  2. Chocolate ice-cream
  3. Strawberry ice-cream

Here we can see our list is ready through css list property.




list-style-image


Here by this property we can specify the image in place of type property of list item maker whether it is ordered list property or unordered list property.



Let's understand this by taking an example:-



<!DOCTYPE html> <html>

<head>

<style>

.main{

          list-style-image:url("fruits.jpg");

}

.cream{

          list-style-image:url("icecream.jpg");

}

</style>

</head>

<body>

<div>

<p> List of fruits </p>

<ul class="main">

<li> Mango </li>

<li> Apple </li>

<li> Grapes </li>

</ul>

</div>



<div>

<p> List of ice-cream </p>

<ol class="cream">

<li> Vanila ice-cream </li>

<li> Chocolate ice-cream </li>

<li> Strawberry ice-cream </li>

</ul>

</div>

</body>

</html>



Output of the Program



List of fruits

  • Mango
  • Apple
  • Grapes


List of ice-cream

  1. Vanila ice-cream
  2. Chocolate ice-cream
  3. Strawberry ice-cream

Here our image is set as the list item maker.





list-style-position


Here by this property we can specify the position of list item maker whether it is list-type property or list-image property.



We are having two values for specifying position for our list item maker which are as follows :-


  1. outside (by default)
  2. inside


Let's understand this by taking an example:-



<!DOCTYPE html>

<html>

<head>

<style>

.main{

          list-style-position:outside;

}

.cream{

          list-style-position:inside;

}

</style>

</head>

<body>

<div>

; <p> List of fruits </p>

<ul class="main">

<li> Mango </li>

<li> Apple </li>

<li> Grapes </li>

</ul>

</div>

<div>

<p> List of ice-cream </p>

<ol class="cream">

<li> Vanila ice-cream </li>

<li> Chocolate ice-cream </li>

<li> Strawberry ice-cream </li>

</ul>

</div>

</body>

</html>



Output of the Program



List of fruits

  • Mango
  • Apple
  • Grapes

List of ice-cream

  1. Vanila ice-cream
  2. Chocolate ice-cream
  3. Strawberry ice-cream

Here our position is set for the list item maker.



list-style


Here by this property we can specify every property like list-style-type, list-style-image, list-style-position in a single line,as it is the shorthand property for specifying every value of list style property in a single line.



But before specifying list-style property we must know the order of the property values which are as follows:-


  1. list-style-type
  2. list-style-position
  3. list-style-image


Let's understand this by taking an example:-



<!DOCTYPE html>

<html>

<head>

<style>

.main{

          list-style:circle inside url("fruits.png");

}

.cream{

         list-style-:lower-roman outside url("icecream.jpg");

}

</style>

</head>

<body>

<div>

<p> List of fruits </p>

<ul class="main">

<li> Mango </li>

<li> Apple </li>

<li> Grapes </li>

</ul>

</div>

<div>

<p> List of ice-cream </p>

<ol class="cream">

<li> Vanila ice-cream </li>

<li> Chocolate ice-cream </li>

<li> Strawberry ice-cream </li>

</ul>

</div>

</body>

</html>



Output of the Program



List of fruits

  • Mango
  • Apple
  • Grapes

List of ice-cream

  1. Vanila ice-cream
  2. Chocolate ice-cream
  3. Strawberry ice-cream

Here in one line we just declare all the properties of list item maker.








CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute