CSS list style

The CSS list-style property is the shorthand property for list-style-type, list-style-position, and list-style-image properties.

CSS list style

The CSS list-style property is the shorthand property for list-style-type, list-style-position, and list-style-image.

Syntax

list-style: list-style-type list-style-position list-style-image;


It is not a must to specify all three list-style properties.

/* Only list-style-type */
list-style:none;

/* list-style-type and list-style-position */
list-style:disc inside;

/* list-style-type, list-style-position and list-style-image */
list-style:none outside url('../img/shape.png');

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        ul{list-style: square inside }
     </style>
</head>
<body>
    <h4>The list-style property</h4>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
</body>
</html>

Definition and Usage

The list-style property is generally specified in the following order

  • list-style-type
  • list-style-position
  • list-style-image

Although this is the formal syntax, you can specify the values in any order.

/* list-styke-position and list-style-type */ 
list-style: inside disc;

Share Tweet Send
0 Comments
Loading...