CSS Lists Styling

Published by StudyMuch on February 23, 2022February 23, 2022

CSS Lists Styling with Programming Examples

In this tutorial we will learn how to style the HTML List using the lots of CSS properties. If you don’t learn the HTML List Tutorial
visit and learn the HTML Lists Tutorial, in that we covered all about the HTML List so, visit and learn HTML List Tutorial.

CSS List

In CSS there are a lot of option for styling the List element of HTML, through applying the CSS properties we can change the list’s colors, background, bullets, lists position and we also used the picture in the place of bullets.

If you learn the HTML List than you know how to make list in HTML document. Even if you haven’t read doesn’t matter, let’s have a quick review of HTML List. (Visit and Learn HTML List Full Tutorial)

We give you some basic information about the HTML List.

<ul>: It is a unordered list, list items are marked with bullets.
<ol>: It is an ordered list. List items are marked with numbers and letters.
<li>: It is defining the List Items for both unordered and ordered lists.

Now we learn how to style the HTML List with different-different CSS properties.

And you also see the programming examples and source code.

CSS Lists Bullet Style and Types

We have lots of style to decorate the HTML Bullets, given below all the bullets styles, that we used in programming examples also.

For using bullets styles, we need to used list-style-type CSS property.

Valid value to style CSS List.

circle: It make a hollow circle bullets style.
square: It make a filled square bullets style.
decimal: Decimal numbers of bullets e.g., 1,2,3.
none: No bullets type.
disc: A bullet like filled circle, it is default value of bullets.
decimal-leading-zero: In this value decimal number with the leading zero, e.g., 01.02.03.
upper-roman: Bullets is uppercase roman number, e.g., I, II, III.
lower-roman: Bullets is lowercase roman number, e.g., i, ii, iii.
upper-alpha: Bullets is uppercase letter e.g., A, B, C.
lower-alpha: Bullets is lowercase letter e.g., a, b, c.
armenian: Traditional Armenian number.
arabic-indic: Traditional Arabic Indic number. Etc.

Ordered List

Programming Examples of Ordered List.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered list</title>
    <style type="text/css">
        p{color: brown;}
      #decimal{list-style-type: 
      decimal; color: blue;}
      #upper-alpha{list-style-type: 
      upper-alpha;color: chocolate;}
      #lower-roman{list-style-type: 
      lower-roman; color: crimson;}
      #lower-greek{list-style-type: 
      lower-greek; color: darkgreen;}
      #decimal-0{list-style-type: 
      decimal-leading-zero;}
    </style>
<body>
    <p>Ordered List disc</p>
    <ol id="decimal">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>    
<p>Ordered List circle</p>
    <ol id="upper-alpha">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
    <p>Ordered List square</p>
    <ol id="lower-roman">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
    <p>Ordered List square</p>
    <ol id="lower-greek">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
    <p>Ordered List square</p>
    <ol id="decimal-0">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
</body>
</html>

Output of programming example.

Unordered List

Programming Example of Unordered List.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered list</title>
    <style type="text/css">
        #disc{list-style-type: disc; 
         color:blue}
        #circle{list-style-type: 
          circle;color: red;}
        #square{list-style-type:
         square;color: green;}
    </style>
<body>
    <p>Unordered List disc</p>
    <ul id="disc">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
    <p>Unordered List circle</p>
    <ul id="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
    <p>Unordered List square</p>
    <ul id="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>
</html>

Output of programming example.

CSS List Bullet Position

We also changed the position of list bullets, it has also some valid value to change the position. The list-style-position CSS property sets the position of bullets.

Valid value are given;

inside: It sets the bullets to sit inside the list items.
outside: It sets the bullets to sit outside the list items.

Programming Example of Bullets Position.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>list Bullets Position</title>
    <style type="text/css">
     #in{list-style-position: inside; 
color: blue;}
     #out{list-style-position: outside;
 color: blue;}
    </style>
<body>
    <ul id="out">
    <li>HTML & CSS is the best of 
     web development.</li>
    <li>HTML & CSS is the best of
     web development.</li>
    <li>HTML & CSS is the best of 
    web development.</li>
    <li>HTML & CSS is the best of 
    web development.</li>
    </ul>
    <ul id="in">
        <li>HTML & CSS is the best of 
        web development.</li>
        <li>HTML & CSS is the best of 
        web development.</li>
        <li>HTML & CSS is the best of
        web development.</li>
        <li>HTML & CSS is the best of
        web development.</li>
    </ul>
    </body>
</html>

Output of programming example.

Above you can see the output of programming one list bullets position is inside and one list bullets position is outside.

CSS List Bullet Image

In CSS we also insert image as a bullet, in the place of bullet we used the image. To use this, we need to use the list-style-image CSS property.

Example of Bullets Image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered list</title>
    <style
type="text/css">
        ul,ol{list-style-type: none;
        padding-left: 20px;}
    ul li{padding-left: 20px ;
    background-image:url("star.png");
    background-size: 20px 20px;
    background-position: top left;
    background-repeat: no-repeat;}
    ol li{padding-left: 30px ;
    background-image:url("whatsapp.png");
    background-size: 20px 20px;
    background-position: top left;
    background-repeat: no-repeat;}
    </style>
<body>
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java</li>
    <li>Python</li>
    </ul>
    <ol>
        <li>HTML & CSS is the best of
         web development.</li>
        <li>HTML & CSS is the best of 
        web development.</li>
        <li>HTML & CSS is the best of
         web development.</li>
        <li>HTML & CSS is the best of
         web development.</li>
    </ol>
     </body>
</html>

Output of programming example.

Above you can see output, we used the image in the place of bullets, through using the background image property.

CSS List with Padding Margin and Color.

To make the list attractive and beautiful we can add padding, margin, and color in the list.

Programming Example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered list</title>
    <style type="text/css">
        ul li{background:lightseagreen;
        padding: 5px;     
        margin-left: 30px;}
        ol li{
            background:lightgreen ;
            padding: 5px;
            margin-left: 30px;}
        ol{
            list-style-type: upper-alpha;
            color:blue;
            background: burlywood;
            padding: 15px;}
        ul{list-style-type:disc;
            color:darkred;
            background:dodgerblue;
            padding: 15px;}
    </style>
<body>
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java</li>
    <li>Python</li>
    </ul>
    <ol>
        <li>HTML & CSS is the best of 
         web development.</li>
        <li>HTML & CSS is the best of 
        web development.</li>
        <li>HTML & CSS is the best of
         web development.</li>
        <li>HTML & CSS is the best of 
         web development.</li>
    </ol>
     </body>
</html>

Output of programming example.

Above output of programming example, you can see the colorful list with padding and margin.

Changing and Coloring Bullets

We can personally style the bullets of our HTML list, you change the bullets icon of your own choice such any character, symbol etc. Just see the example below.

Programming Example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unordered list</title>
    <style type="text/css">
        li{
            list-style-type: none;}
        ul li::before{content: "&";
        color: green;}
        ol li::before{content: "@";
        color: blue;}
    </style>
<body>
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java</li>
    <li>Python</li>
    </ul>
    <ol>
        <li>HTML & CSS is the best of
         web development.</li>
        <li>HTML & CSS is the best of 
        web development.</li>
        <li>HTML & CSS is the best of
         web development.</li>
    </ol>
     </body>
</html>

Output of programming example.

Above output of programming example, you can see some symbol in the place of bullets, that we used in the programming.

In this tutorial we learned how to style the bullets CSS of HTML List with different properties of CSS, here we used all the CSS properties to style the bullets with programming example. I hope you read this tutorial well and learn new something, if you have any doubt, you can ask in the comment section.

Read Also-

3 Comments

zoritoler imol · June 30, 2022 at 3:55 am

My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can not imagine just how much time I had spent for this info! Thanks!

Jacquiline Magro · September 23, 2022 at 7:37 am

Thanks for this post, I am a big big fan of this site would like to go along updated.

gateio · May 26, 2023 at 12:12 am

I may need your help. I’ve been doing research on gate io recently, and I’ve tried a lot of different things. Later, I read your article, and I think your way of writing has given me some innovative ideas, thank you very much.

CSS Lists Styling

Related

3 Comments

zoritoler imol · June 30, 2022 at 3:55 am

Jacquiline Magro · September 23, 2022 at 7:37 am

gateio · May 26, 2023 at 12:12 am

Leave a Reply Cancel reply

Interview Questions and Answers for Freshers

Python Sets

Best Programming Language for Developing AI

CSS Lists Styling

Related

3 Comments

zoritoler imol · June 30, 2022 at 3:55 am

Jacquiline Magro · September 23, 2022 at 7:37 am

gateio · May 26, 2023 at 12:12 am

Leave a Reply Cancel reply

Related Posts

Interview Questions and Answers for Freshers

Python Sets

Best Programming Language for Developing AI