Style a bulleted list in CSS3

We can add style rules to the bulleted list on your page change the shape of the bullets or remove the bullets altogether (Style a bulleted list in CSS3). We can also change how the list items are formatted so that they appear in a horizontal line across the page instead of as a vertical list. These CSS techniques are often used when creating navigation links on a page. navigation links are only defined as a list of unordered links using the <ul> tag/

Table of Contents

Style a bulleted list

Create a list

step 1: Create a bulleted list using the <ul> and <li> tags.

Step 2: Inside the <ul> tag, type class-“?”, replacing? with a CSS class name

Step 3: You can type a<br> tag with a clear style to keep the text that follows the list from wapping.

Style the list

Step 4: Define a CSS Class for the <ul> tag using the class name from step 2

Step 5: In the declaration type list style-type: ? replacing? with a bullet type.

Step 6: type a semicolon (:).

Step 7: Type padding: 0 to remove the indenting normally added to a list

Step 8: Define a CSS class for the <li> tag nested inside the <ul> tag.

Step 9:In the declaration type float: left to align the list items to the left beside one another.

Step 10: Type a semicolon (:).

Step 11: To add space around the list items type padding: ?, replacing? with a measurement.

Result Output

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <style>
            h1{
                text-align: center;
                text-transform: uppercase;
            }
            span.highlight{background-color: #ffcc99;}
            body{
                background-color: #ffffcc;
            }
            ul.horiz{
                list-style-type: none;
                padding: 0;
            }
            ul.horiz li{
                float: left;
                padding: 10px;
            }

        </style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <hr>
        <ul class="horiz">
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">About Us</a></li>
            <li><a href="index.html">Contact Us</a></li>
            <li><a href="index.html">Service</a></li>
        </ul>
        <br style="clear:both"
        <ol>
            <li>Frontend Developer</li>
            <li>Back-end Developer</li>
        </ol>
        <Section class="First">
            <p> <span class="highlight">A front end developer</span> has one general responsibility: 
              to ensure that website visitors can easily interact with the page.
                and Back-end developers are the experts who build and maintain the mechanisms that 
              process data and perform actions on websites.</p>
        </Section>
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

Follow us on Social Media For More

Facebook, Instagram, Pinterest