Lists with HTML Bullets

Lists with HTML Bullets

How to list the item with different bullet styles?

Explanation

Bullets in different styles:
The lists we use in html will look like an ordinary one. We can give the bullets in different styles which makes the page to have a nice look. It is very simple task of adding an attribute to change the nature of the bullets.
There are differenet bullet styles and have a different look for the forms. Bullet styles can be customized. Let us have a list of bullet styles.

Example :


  • Unordered Lists

    • Disc bullet
    • Circle bullet
    • Square bullet

  • Ordered Lists

    • Numbered

      • Decimal
      • Lowercase Roman numeral
      • Uppercase Roman numeral

    • Alphabetical

      • Lowercase
      • Uppercase

Result :

  • Unordered Lists
    • Disc bullet
    • Circle bullet
    • Square bullet
  • Ordered Lists
    • Numbered
      • Decimal
      • Lowercase Roman numeral
      • Uppercase Roman numeral
    • Alphabetical
      • Lowercase
      • Uppercase

Along with bulleted lists, you can also create numbered or alphabetized lists which are known in HTML as ordered lists. To have an ordered list, you use the ol element which requires both an

    start tag and an

end tag. Between these tags you must place at least one or more items, each of which are preceded by an

  • start tag

    Example :

    1. Decide on order type.
    2. Use appropriate order styles.
    3. Enjoy with different bullet styles.

    Result :

    1. Decide on order type.
    2. Use appropriate order styles.
    3. Enjoy with different bullet styles.

    Just change the type of

      to

        to have the desired ordered list.

        Value Ordering Style
        1 1, 2, 3, …
        i i, ii, iii, …
        I I, II, III, …
        a a, b, c, …
        A A, B, C, …

        Bullets with CSS:
        Bullets can also be used with CSS to have a great look. Here let us have an example to add a gif file as bullets for a list using CSS.

        Example :

        • hscripts
        • funmin
        • indiandir

        Here goes the CSS style

        ul.TickList { list-style-image: url(‘tick.gif’) }

        Result :

        • hscripts
        • funmin
        • indiandir
  • Leave a Reply

    Your email address will not be published. Required fields are marked *