CSS List

CSS List:

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

In CSS, you can style lists to change their appearance and layout. There are mainly two types of lists in HTML: unordered lists (<ul>) and ordered lists (<ol>). Each type of list can contain list items (<li>). Here's how you can style these lists using CSS:

1. Styling Unordered Lists (<ul>):

Unordered lists are typically used for items that don't have a specific order or sequence. You can style them using CSS like this:

In this example, we first remove the default list styles (bullet points) by setting list-style-type to none. Then, we add custom styles to the list by specifying the type of bullet points (you can use 'circle', 'square', or 'disc') and styling the list items.

2. Styling Ordered Lists (<ol>):

Ordered lists are used when you want to display a list of items in a specific sequence or order (e.g., numbered lists). You can style them like this:

The approach for styling ordered lists is similar to unordered lists. You remove the default list styles, add custom styles (e.g., decimal numbers), and style the list items.

3. Nested Lists:

If you have nested lists (lists within lists), you can apply styles to them in the same way by specifying the appropriate selectors for the nested lists and list items.

Here's an example of HTML markup with nested lists:

In this case, the CSS styles defined for ul.custom-list and ol.custom-list will be applied to both the top-level and nested lists.