CSS TOPICS

CSS LISTS

Two types of list exist in CSS i.e. Unordered lists and Ordered Lists

  1. UNORDERED LISTS
    In unordered lists, the list items are marked with bullets.
  • unordered lists (
      ) – the list items are marked with bullets
  1. ORDERED LISTS
    In ordered lists, the list items are marked with numbers and alphabet.
  • ordered lists (
      ) – the list items are marked with numbers or letters

Example:

<p> 
         Unordered lists 
      </p> 
      <ul class="a"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul > 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <p> 
         Ordered Lists 
      </p> 
      <ol > 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <ol > 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol>c

Image as List Marker: This property specifies for the image as list item marker.

Example:

​​<style>
ul.a{
list-style-image:url(ss.jpg);
}
</style>

list-style-type​:

the value can be following:

  • circle
  • lower-roman
  • upper-roman
  • decimal , eg :1,2,3,etc
  • decimal-leading-zeroes , eg :01,02,03,04,etc
  • lower-alpha, eg : a,b,c,etc
  • upper-alpha, eg : A,B,C,etc
  • square

Example:

​<style>
ul.a{
list-style-type:circle;
}
</style>

list-style-position​:

This property specifies the position of the list item marker. There are 2 types of position marker:

1.list-style-position: outside
In this, the bullet points will be outside the list item. The start of each line of the list will be aligned vertically.

2. list-style-position:inside
In this the bullet points will be inside the list. The line along with the bullet points will be aligned vertically.

Styling Lists:
The list can be formatted in CSS. Different colors, borders, background, and paddings can be set for the lists.

 

DOWNLOAD LATEST PROJECTS

DOWNLOAD