CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



list-style

List-Style is a CSS property that allows you to customize the appearance of lists in your web pages. Lists are a common feature in web design, and they can be used to display a variety of information, such as navigation menus, product features, or blog posts. By using the List-Style property, you can change the bullet points or numbering style of your lists, as well as their position and alignment on the page.

List-Style Types

The List-Style property has several values that you can use to change the appearance of your lists. The most common values are:

  • disc - This is the default value for unordered lists. It displays a solid circle as the bullet point.
  • circle - This value also displays a circle as the bullet point, but it is hollow instead of solid.
  • square - This value displays a solid square as the bullet point.
  • decimal - This is the default value for ordered lists. It displays a number as the bullet point.
  • lower-roman - This value displays a lowercase Roman numeral as the bullet point.
  • upper-roman - This value displays an uppercase Roman numeral as the bullet point.

You can set the List-Style property for an entire list or for individual list items. To set the property for an entire list, you can use the following code:

  
    ul {
      list-style: square;
    }
  

This code sets the bullet point style for all unordered lists on the page to a solid square. To set the property for individual list items, you can use the following code:

  
    li {
      list-style: upper-roman;
    }
  

This code sets the bullet point style for all list items on the page to an uppercase Roman numeral.

List-Style Position

The List-Style property also allows you to change the position of the bullet points or numbering in your lists. The default position is outside the list item, but you can also set it to inside the list item or to a custom position using the List-Style-Position property. Here is an example:

  
    ul {
      list-style-position: inside;
    }
  

This code sets the bullet points for all unordered lists on the page to appear inside the list item. You can also use the values "outside" or "inherit" for this property.

List-Style Image

In addition to the built-in bullet point styles, you can also use custom images as bullet points in your lists. To do this, you can use the List-Style-Image property and specify the URL of the image file. Here is an example:

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

This code sets the bullet points for all unordered lists on the page to use the image file "bullet.png" as the bullet point. You can also use the values "none" or "inherit" for this property.

List-Style Shorthand

Finally, you can use the List-Style shorthand property to set all three List-Style properties at once. Here is an example:

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

This code sets the bullet points for all unordered lists on the page to a solid square, inside the list item, and using the image file "bullet.png" as the bullet point.

Conclusion

The List-Style property is a powerful tool for customizing the appearance of lists in your web pages. By using the various List-Style properties, you can change the bullet point style, position, and image of your lists to match the design of your website. Experiment with different values and see how they affect the appearance of your lists!

References

Activity