CSS Lists

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:

Unordered lists

 

    • one

 

    • two

 

    • three

 

 

    • one

 

    • two

 

    • three

 

 

Ordered Lists

 

    1. one

 

    1. two

 

    1. three

 

 

    1. one

 

    1. two

 

    1. three

 

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