CSS LIST

 

There are two main types of lists

• unordered lists (<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:

• 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

Different List Items:

list-style-type: property specifies the type of list item marker.

list-style-type: circle;

list-style-type: upper-alpha;

list-style-type: lower-alpha;

list-style-type: square;

list-style-image: property specifies an image as the list item marker

 list-style-image: url(./HTML_CSS_Projects/featured-small-circular.jpg);

list-style-position: property specifies the position of the list-item markers

list-style-position: inside;

list-style-position: outside;

list-style-type:none: property can also be used to remove the markers/bullets.

 list-style-type: none;

Note: The list also has a default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>.

list-style: This Property is a shorthand property. It is used to set all the list properties in one declaration

list-style: square inside url(./HTML_CSS_Projects/featured-small-circular.jpg);