Lists

Lists

Shorthand properties are those properties that allow you to style the texts according to your demand. The list provides you with the same. The list is the shorthand property of CSS that behaves like any other text, but the shorthand property will let you design the list numerous ways.

Lists can be defined in two ways:-

1. Unordered List <ul>
2. Ordered List <ol>

<li> is used to indicate the elements of the lists..
<li> is declare for each element between <ol> and </ol>

Example

<ul>
<li> Element1 </li>
<li> Element2 </li>
</ul>

CSS allows you to design the list with different aspects like:-

  • list-style-type: //upper-roman, square, circle, etc can be defined here.
  • list-style-image: //appear custom image list rather than simple circle or square.
  • List-style-image: url(“www.imagelocation.png”)
  • List-style-position: //decides whether the list can appear inside the list item.
  • Padding: //Lined up the list with defined pixel (-- px)
  • Background-image: //Path of image.
  • Background-position: //Where the image will appear.
  • Background:repeat: //Repeat until the background image will fill the available background
    Similarly, CSS provides various other attributes for the styling of the list.
    e.g., we can start a list from a random number by using <ol start = “random_number”> attribute and also reverse the list by putting reversed at the end of the attribute (<ol start = “random_number” reversed>) or manipulate the numbers with <li value = “2” > .

  Here are some examples that help you to understand the implementation of the list with the CSS class. This will provide you with a better visual for understanding the concepts.

Example 1:

<html> <html lang="en-US"> <style> ul.a { list-style-type: circle; } </style> </head> <body> <h2>Knowledge2life</h2> <ul class="a"> <li>Website 1</li> <li>Website 2</li> <li>Website 3</li> </ul> </body> </html>

OUTPUT

Knowledge2life

  • Website 1
  • Website 2
  • Website 3

Example 2:

<html> <html lang="en-US"> <style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } </style> </head> <body> <h2>Knowledge2life</h2> <ul class="a"> <li>Website 1</li> <li> Website 2</li> <li> Website 3</li> </ul> <ul class="b"> <li> Website 1</li> <li> Website 2</li> <li> Website 3</li> </ul> </body> </html>

OUTPUT

Knowledge2life

  • Website 1
  • Website 2
  • Website 3
  • Website 1
  • Website 2
  • Website 3