CSS Lists
In HTML, there are two main types of lists:
1. Unorder lists (<ul>) : the list items are marked with bullets
2. Ordered lists (<ol>) : the list items are marked with numbers or letters
The CSS list properties allows you to:
- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set an image as the list item marker
- Add background colors to lists and list items
List-style-type
The list-style-type property allows to define the type of bullets/numbers used for the unordered/ordered list.
The different values permitted with list-style-type for unordered list are: circle , square, disc, none
Sample code with unordered list
<!DOCTYPE html> <html> <head> <style> ul{ list-style-type: circle; /*circle , square, disc, none*/ } </style> </head> <body> <h2>Lets beautify the list</h2> <p>A simple example of unordered list</p> <ul> <li>Football</li> <li>Cricket</li> <li>Badminton</li> </ul> </body> </html>
list-style-type can also be used with the ordered list. The different values permitted with list-style-type for ordered list are:
Decimal, decimal-leading-zero, upper-roman, lower-roman,none
Sample code with ordered list
<!DOCTYPE html> <html> <head> <style> ol { list-style-type: decimal; /*Decimal, decimal-leading-zero, upper-roman, lower-roman,none*/ } </style> </head> <body> <h2>Lets beautify the list</h2> <p>A simple example of ordered list</p> <ol> <li>Football</li> <li>Cricket</li> <li>Badminton</li> </ol> </body> </html>
A better way to achieve the above output is by using classes as shown below
<!DOCTYPE html> <html> <head> <style> .a { list-style-type: circle; /*circle , square, disc, none*/ } .b { list-style-type: decimal; /*Decimal, decimal-leading-zero, upper-roman, lower-roman,none*/ } </style> </head> <body> <h2>Lets beautify the list</h2> <p>A simple example of list using classes</p> <ul class="a"> <li>Football</li> <li>Cricket</li> <li>Badminton</li> </ul> <ol class="b"> <li>Grapes</li> <li>Bananas</li> <li>Watermelon</li> </ol> </body> </html>
Using an Image As The List Item Marker
List-style-image
Sample code
<!DOCTYPE html> <html> <head> <style> ul { list-style-image: url('bullet.gif'); } </style> </head> <body> <h1>Illustration of list-style-image Property</h1> <p>The list-style-image property replaces the list-item marker with an image:</p> <ul> <li>Football</li> <li>Cricket</li> <li>CBadminton</li> </ul> </body> </html>
Values
In the above example, “bullet.gif” is the name of image. Image size should be small.
Position The List Item Marker
List-style-position
Sample code
<!DOCTYPE html> <html> <head> <style> .a { list-style-position: outside; } .b { list-style-position: inside; } </style> </head> <body> <h1>The list-style-position Property</h1> <h2>list-style-position: outside (default):</h2> <ul class="a"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra nunc a purus laoreet pulvinar. </li> <li>Fusce vitae euismod turpis. Morbi libero ligula, pellentesque dictum elementum commodo</li> <li>ullamcorper quis massa. Quisque vitae purus a metus accumsan rutrum. Vivamus vel diam sed lectus convallis placerat et nec neque.</li> </ul> <ul class="b"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra nunc a purus laoreet pulvinar. </li> <li>Fusce vitae euismod turpis. Morbi libero ligula, pellentesque dictum elementum commodo</li> <li>ullamcorper quis massa. Quisque vitae purus a metus accumsan rutrum. Vivamus vel diam sed lectus convallis placerat et nec neque.</li> </ul> </body> </html>
Values permitted for List-Style-Position are : Inside, outside
List – Shorthand Property
List-style
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Sample code
ul {list-style: square inside url(“bullet.gifâ€);}
When using the shorthand property, the order of the property values are: List-style-type, list-style-position, list-style-image
If any of the property values above are missing, the default value for the missing property will be inserted, if any.
Example code
<!DOCTYPE html> <html> <head> <style> ul { list-style: disc outside url("bullet.gif"); } </style> </head> <body> <h1>The list-style Property</h1> <p>The list-style is a shorthand property for all the list properties.</p> <ul> <li>Football</li> <li>Cricket</li> <li>Badminton</li> </ul> </body> </html>
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <li> tag affects the entire list, while properties added to the <li> tag will affect the individual list items. See the example below
<!DOCTYPE html> <html> <head> <style> ul { width:60%; background:#ff9999; padding:20px;} ul li{background:#ffe5e5; padding:5px; margin-left:35px;} </style> </head> <body> <h1>The list-style Property</h1> <p>The list-style is a shorthand property for all the list properties.</p> <ul> <li>Football</li> <li>Cricket</li> <li>Badminton</li> </ul> </body> </html>