CSS Lists Styling

🧑‍🎨 What are CSS Lists?

Lists are used in HTML to organize content, and CSS allows you to style the lists in a variety of ways. By default, lists have their own styles (such as bullets for unordered lists and numbers for ordered lists), but CSS gives you control over those styles.

🎨 Removing Default List Styles

By default, browsers apply certain styles to both ordered and unordered lists. For example:

• Unordered lists have bullet points (•).
• Ordered lists display numbers (1., 2., 3.).
• Both types of lists have a certain amount of indentation.

You can remove or change these default styles using the list-style-type and list-style-position properties.

list-style-type

This property controls the appearance of the list marker (the bullet or number). Common values include:

• disc: Default for unordered lists (•).
• circle: A hollow circle for unordered lists.
• square: A square marker for unordered lists.
• decimal: Default for ordered lists (1, 2, 3...).
• lower-roman, upper-roman, lower-alpha, upper-alpha: For different styles of ordered lists.

ul {
  list-style-type: none; /* Removes bullets */
}

list-style-position

This property controls the position of the list marker in relation to the list item. The two options are:

• inside: The list marker appears inside the content flow, affecting the indentation of the list items.
• outside: The default value, where the list marker appears outside the content flow.

ul {
  list-style-position: inside; /* Places the bullet inside the content area */
}

🎨 Styling List Items with CSS

CSS allows you to apply custom styles to the items within the list as well. You can control the font, color, spacing, and even background images for list items.

list-style-image

If you want to replace the default marker (bullet or number) with an image, you can use this property. It accepts a URL to an image, which will be displayed instead of the standard list marker.

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

padding and margin

To control the space around the list items, you can use padding and margin. These properties affect the overall spacing between the items and the container.

ul {
  padding-left: 20px; /* Adds left padding to the list container */
}
 
li {
  margin-bottom: 10px; /* Adds space between each list item */
}

text-decoration, color, and font

You can apply general text styling to the list items as you would with any other text element. Here's how you can change the text color, style, and decoration:

li {
  color: #06abeb;
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
}

🔧 Advanced List Styling Techniques

You can combine these properties to create sophisticated list designs.

Nested Lists

For nested lists (lists within lists), you can target different levels of lists and apply custom styles to each level:

ul {
  list-style-type: none;
  padding-left: 0;
}
 
ul li {
  margin-bottom: 10px;
}
 
ul li ul {
  padding-left: 20px;
  list-style-type: square; /* Nested lists will have square bullets */
}

Styling Ordered Lists

You can customize the numbering style of ordered lists using the list-style-type property, as mentioned earlier, or even use a counter for a more complex design.

ol {
  list-style-type: upper-roman; /* Roman numerals for ordered list */
}
 
ol li {
  font-size: 18px;
  margin-bottom: 8px;
}

🧑‍🎨 Key Takeaways

🧪 Try Yourself

import './styles.css';

function App() {
return (
  <div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
  </div>
);
}

export default App;