How to style unorder list in HTML

Styling an unordered list (ul) in HTML can be done using CSS to modify various aspects such as indentation, bullet style, color, and more. Here’s an example of how you can style an unordered list:

<ul class="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
.my-list {
  list-style-type: square; /* Bullet style */
  color: blue; /* Text color */
  margin-left: 20px; /* Indentation */
  padding-left: 10px; /* Padding inside the list */
  font-family: Arial, sans-serif; /* Font family */
}

.my-list li {
  margin-bottom: 5px; /* Space between list items */
}

In this example, we have assigned the class “my-list” to the <ul> element to target it with CSS. The CSS properties used are as follows:

  • list-style-type: Sets the bullet style for the list items. You can use different values like “circle,” “square,” “disc,” or “none” to remove the bullet.
  • color: Sets the text color of the list items.
  • margin-left: Sets the indentation or margin on the left side of the list.
  • padding-left: Sets the padding inside the list, pushing the content away from the left edge.
  • font-family: Sets the font family for the list items.
  • .my-list li: Targets the list items inside the unordered list and applies specific styles.

Leave a Reply