CSS list-style Property

CSS list-style property specifies the maker type, position, and image for ordered and unordered list items in a single declaration.

It is a shorthand for the following list properties:

Try out the example below to check how it works:

Example:

ul{
  list-style: square outside url(images/thumb.png);
}

Note: If any of the three values is missing, its default value is used.


CSS Syntax

The list-style property has the below syntax:

list-style: list-style-type list-style-position list-style-image|initial|inherit;


Property Values

The list-style property accepts the following values:

list-style-typeSpecifies the type of marker for list items.
list-style-positionSpecifies the position of the list-items marker.
list-style-imageSets an image as the list items marker.
initialSets the list-style property to its default value.
inheritInherits the list-style property from its parent element.

General Info

Default Valuedisc outside none
InheritedYes
JavaScript Usageelement.style.listStyle = “square outside url(images/thumb.png)”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment