CSS List

List Styles:

List Style Type:

Sets the appearance of the list item marker.

                          
                            ul {
                                list-style-type: disc; /* or circle, square, decimal, etc. */
                            }

This scenario examples the list item marker being a filled circle.


List Style Image:

Uses an image as the list item marker.

                          
                            ul {
                                list-style-image: url('bullet.png');
                            }

This example uses a custom image as the list item marker.


List Style Position:

Controls the position of the list item marker.

                          
                            ol {
                                list-style-position: inside; /* or outside */
                            }

This example positions the list item marker inside the content flow.


List Item Styles:

Padding for List Items:

Adds padding to list items for better spacing.

                          
                            ul, ol {
                                padding-left: 20px;
                            }

This example adds 20 pixels of padding to the left of each list item.


List Item Background Color:

Sets a background color for list items.

                          
                            ul li {
                                background-color: #f2f2f2;
                            }

This example gives list items a light gray background color.


List Item Borders:

Adds borders to list items.

                          
                            ol li {
                                border-bottom: 1px solid #ccc;
                            }

This example adds a bottom border to each list item in an ordered list.


Removing Default List Styles:

Removes default list styles to start with a clean slate.

                          
                            ul, ol {
                                list-style: none;
                                padding: 0;
                                margin: 0;
                            }

This might include unordered or ordered lists. This example in the code removes defaults style and resets padding and margin for both unordered and ordered lists.


Horizontal List:

Creates a horizontal list.

                          
                            ul {
                                display: flex;
                                list-style: none;
                            }
                            
                            li {
                                margin-right: 10px;
                            }

This example uses Flexbox to create a horizontal list.