1. List-style-type:

Definition:             

 Specifies the type of marker for list items. It can take values like disc (default for unordered lists), decimal (default for ordered lists), circle, square, etc.

Syntax:

    ul {
list-style-type: square;
}

2. List-style-image:

Definition:             

Allows you to use an image as the marker for list items.

Syntax:

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

3. List-style-position:

Definition:             

Defines whether the marker should appear inside or outside the content flow.

Syntax:

ul {
list-style-position: outside; /* Default */
}

4. List-style:

Definition:             

A shorthand property that combines list-style-type, list-style-image, and list-style-position.

Syntax:

ul {
list-style: square inside;
}

5. Color:

Definition:             

Sets the color of the text of the list items.

Syntax:

ul {
color: blue;
}

6. Font-Family:

Definition:             

Defines the font family for the text of the list items.

Syntax:

ul {
font-family: ‘Arial’, sans-serif;
}

7. Margin:

Definition:             

Sets the margins of the list.

Syntax:

ul {
margin: 10px;
}

8. Padding:

Syntax:             

Sets the padding inside the list.

Example:

ul {
padding: 10px;
}

9. border:

Definition:             

Adds a border around the list.

Syntax:

ul {
border: 1px solid #ccc;
}

10. Text-Align:

Definition:             

Aligns the text of the list items.

Syntax:

ul {
text-align: center;
}

Now Let’s Create a NavBar using CSS properties on HTML Lists:

Example:

Output: