Lists are another important element on a web page. CSS works for styling both lists i.e. the unordered and the ordered lists. Following are the properties used for styling lists:
Property | Value | Used On | Description |
---|---|---|---|
list-style-type | None; / circle; / disc; / square; | ul | List styles in UL |
decimal; / decimal-leading-zero; / lower-alpha; / upper-alpha; / lower-roman; / upper-roman; | ol | List styles in OL | |
list-style-image | url('sqpurple.gif'); | ul | Image as list style |
list-style-position | outside; / inside; | ul , ol | Position of list |
background-color | #4CAF50; | ul , ol | Background color of list elements |
background-image | url("paper.gif"); | ul , ol | background-image |
Example 1: list-style-type & list-style-image in unordered lists
Example 2: list-style-type in ordered lists
Example 3: list-style-position & background-color
Example 4: background-image, border, box-shadow and hover state