CSS Lists: There are different CSS properties that can be used to control lists. Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, though in unordered lists, the list items are marked using bullets.
Unordered Lists:
o Coffee
o Tea
o Coca Cola
Coffee
Tea
Coca Cola
Ordered Lists:
- Coffee
- Tea
- Coca Cola
I. Coffee
II. Tea
III. Coca Cola
In this tutorial, you will learn-
In this article, you will learn-
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
• unordered records (<ul>) the list items are marked with bullets
• ordered lists (<ol>) the list items are marked with numbers or letters
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set a picture as the list item marker
• Add background colors to lists and rundown items
Different List Item Markers
The list-style-type property specifies the sort of list item marker.
The accompanying example shows some of the accessible list item markers:
Example
<!DOCTYPE html> <html> <head> <style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } </style> </head> <body> <h2>Lists</h2> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
Note: Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
The list-style-picture property determines a picture as the list item marker:
Example
<!DOCTYPE html> <html> <head> <style> ul { list-style-image: url('sqpurple.gif'); } </style> </head> <body> <h2>CSS Lists</h2> <p>The list-style-image property specifies an image as the list item marker:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
Position The List Item Markers
The list-style-position property specifies the position of the list-item markers (bullet points).
“list-style-position: outside;” means that the bullet points will be outside the list item. The beginning of each line of a list item will be aligned vertically. This is default:
“list-style-position: inside;” means that the bullet points will be inside the list item. As it is essential for the list item, it will be part of the text and push the text toward the beginning:
Example
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
Remove Default Settings
The list-style-type:none property can likewise be used to eliminate the markers/bullets. Note that the list likewise has default margin and padding. To eliminate this, add margin:0 and padding:0 to <ul> or <ol>:
Example
<!DOCTYPE html> <html> <head> <style> ul.demo { list-style-type: none; margin: 0; padding: 0; } </style> </head> <body> <p>Default list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Remove bullets, margin and padding:</p> <ul class="demo"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
List – Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in a single declaration:
Example
<!DOCTYPE html> <html> <head> <style> ul { list-style: square inside url("sqpurple.gif"); } </style> </head> <body> <h2>CSS Lists</h2> <p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
When using the shorthand property, the order for the property values are:
• list-style-type (if a list-style-picture is specified, the value of this property will be shown if the picture for some reason can’t be shown)
• list-style-position (specifies whether the list-item markers ought to show up inside or outside the content flow)
• list-style-picture (specifies a picture as the list item marker)
In the event that one of the property values above are missing, the default value for the missing property will be inserted, assuming any.
Styling List With Colors
We can likewise style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the whole list, while properties added to the <li> tag will affect the individual list items:
Example
<!DOCTYPE html> <html> <head> <style> ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; } </style> </head> <body> <h1>Styling Lists With Colors:</h1> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
All CSS List Properties
Property | Description |
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.