css
  1. css-list-style
PreviousNext

CSS List Style

  • CSS List Style is a property that allows you to control the markers, images, and other styling elements of HTML lists.
  • With this property, you can create custom designs for lists in your web pages.

Syntax

list-style: type position image;
  • type specifies the marker type for the list.
  • position specifies the position of the marker.
  • image specifies an image URL or path to use as the marker.

Example

ul {
  list-style: square inside url("https://static.additionalsheet.com/images//others/lucy.jpg");
}
Try Playground

In this example, we use the list-style property to style an unordered list. The type is set to "square", the position is set to "inside", and the image is set to "lucy.jpg". This results in a list with square markers inside the list items, using "lucy.jpg" as the marker image.

Explanation

The list-style property allows you to customize the appearance of list markers, including the shape, position, and image used.

  • The type value can be set to a variety of options, including "disc" (default), "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", and "upper-alpha".
  • The position value specifies the position of the marker relative to the list item text. It can be set to "inside" (default) or "outside".
  • The image value can be set to the URL or path of an image file to be used as the list marker. This can be any image format, including PNG, SVG, and GIF.

Use

CSS List Style can be used to customize the appearance of HTML lists. It can be used to create custom marker shapes, change the position of the marker, and even use images as the marker.

Important Points

  • You can use the none value for type to hide the marker completely.
  • You can use the inherit keyword to inherit list-style values from a parent element.
  • Different types and positions can be used for different levels of nested lists.

Summary

CSS List Style is a powerful property that enables you to create custom designs for HTML lists. By controlling the marker type, position, and image used, you can achieve a wide range of styles and designs. Remember to experiment with different values and options to find the look that works best for your project.

Border CollapseCursor
Published on: