CSS- Lists

We use lists to conveying a set of either numbered or bullet points.

We can use the following five CSS properties to control lists:

  • The list-style-type Property
  • The list-style-position Property
  • The list-style-image Property
  • The marker-offset Property
  • The list-style-type Property

    To control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists ,we use the list-style-type property.

    Example :-

    Result

    • Maths
    • Social Science
    • Physics
    • Maths
    • Social Science
    • Physics
    1. Maths
    2. Social Science
    3. Physics
    1. Maths
    2. Social Science
    3. Physics
    1. Maths
    2. Social Science
    3. Physics

    The list-style-position Property

    The list-style-position property shows whether the marker should appear outside or inside of the box containing the bullet points. It can have one the two values .

    Example :-

    Result

    • Maths
    • Social Science
    • Physics
    • Maths
    • Social Science
    • Physics
    1. Maths
    2. Social Science
    3. Physics
    1. Maths
    2. Social Science
    3. Physics

    The list-style-image Property

    To specify an image so that we can use our own bullet style, we use the list-style-image property. The syntax of the list-style-image property is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets.

    Example :-

    Result

    • Maths
    • Social Science
    • Physics
    1. Maths
    2. Social Science
    3. Physics

    The marker-offset Property

    To specify the distance between the marker and the text relating to that marker, we use the marker-offset property. Its value should be a length as shown in the following example :

    Example

    Result

    • Maths
    • Social Science
    • Physics
    1. Maths
    2. Social Science
    3. Physics