How to add bullet points with CSS?

How to add bullet points with HTML?

Bullet points can be added on a web page with <ol> tag or with <ul> tag.

ol stands for an ordered list whereas ul stands for an unordered list.

Within the above tags, we place the list item tags to add the items to the list.

We will take a look at some practical examples with some HTML code :-

HTML :-

    <h1>Unordered List</h1>
        <ul>
            <li>This is list item 1</li>
            <li>This is list item 2</li>
            <li>This is list item 3</li>
            <li>This is list item 4</li>
            <li>This is list item 5</li>
        </ul>
    <h1>Ordered List</h1>
        <ol>
            <li>This is list item 1</li>
            <li>This is list item 2</li>
            <li>This is list item 3</li>
            <li>This is list item 4</li>
            <li>This is list item 5</li>
        </ol> 

Output :-

In the HTML code, we first created an unordered list with an ul tag that displays some list of items.

Secondly, we have created an ol tag that also contains some list of items.

In the Output image, the Unordered list displays the bullet points in the list although it doesn’t have the numbers displayed for the items in the list because we have created an ul here.

This is followed by the Ordered list and the Order is displayed in an orderly manner displaying the numbers for the list items.

Can I use CSS to add a bullet point to any element?

Yes, we can add Bullet points to various different elements with the help of CSS.

To display bullet points to any element like <p>, we use the CSS property display-list and give it the value of list-time.

Once we use this property, the result will be the bullets displayed preceding the element’s text.

Let’s check this thing with the help of a practical example :-

CSS :-

    p {
       display: list-item;
       margin-left: 1em;
    } 

HTML :-

    <p>This is list item 1 of para.</p>
    <p>This is list item 2 of para.</p>
    <p>This is list item 3 of para.</p>
    <p>This is list item 4 of para.</p>
    <p>This is list item 5 of para.</p> 

Output :-

In the CSS code, we have created a style for p element. We have added the display property for this CSS style and given a value as list-item, we have also added a margin left so that there can be a space between the bullet icon and the text.

In the HTML code, we have created multiple paragraph elements.

In the Output image, it can be seen that p element are displayed in form of bullet points and display.

Recap

In this article’s first section, we learned how to add bullet points with HTML tags.

We have used two HTML tags, one is ol ordered list whereas the other is ul unordered list.

Further, We have also covered the CSS to add bullet points to any element on an HTML webpage.

I hope this clears your query with clarity.