Generally, the listing of the items or the listing of the contents following a particular manner is specified by the CSS list. There are two ways for organizing the list: ordered and unordered. Using the CSS lists, we can build a clean webpage. CSS list is very flexible and easy to manage and, therefore, can be used to arrange a huge variety of contents. By default, the style of the list is borderless.

Now let us discuss the two types of lists:

  • Unordered Lists: For the unordered lists, the contents or the items are marked with bullets (bullets are small black circles), by default.
  • Ordered Lists: Items or the contents of the ordered lists are marked with numbers or alphabets.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

List Item Marker

This is a property using which the type of the item marker is specified, such as ordered type or unordered type. The appearance of the list item marker of a list item element (such as character, disc, or the custom counter style) is specified by the list style type property, and the default value is set to ‘disc’.

Syntax:

List-style-type:value;

Values that can be used:

  • Circle
  • Decimal (such as 1, 2 , 3 etc.)
  • Decimal leading zeros (such as 01, 02 , 01 etc.)
  • Lower roman
  • Upper toman
  • Lower alpha (such as a,b,c etc.)
  • Upper alpha (such as A , B, C etc,)
  • Square

Example:

Here, the CSS list with different types of list-style-type is described, and the values are set to square and lower alpha.

<!DOCTYPE html>

<html>

<head>

    <style>

    ul.a {

        list-style-type: square;

    } 

    ol.c {

        list-style-type: lower-alpha;

    }

    </style>

</head>

<body>

    <h2>

        CSS LISTS

    </h2> 

<p> Unordered Lists</p>

    <ul class="a">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <ul class="b">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>  

<p> Ordered Lists </p>

    <ol class="c">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ol>

    <ol class="d">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ol>

</body>

</html>

Output:

CSS_List_1

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program
Become a Certified UI UX Expert in Just 5 Months!

Image as List Marker

This is a special type of property. Using the list-style image property, the images are set to be used as the list marker. The default value of this property is set to ‘none’.

Syntax:

list-style-image: url;

Example:

In this example, the CSS List is described using different types of list-style-image, and we set the default value with the URL of the image.

<!DOCTYPE html>

<html>

<head>

    <title>list-style-image Property IN CSS </title>

    <style>

    ul {

        list-style-image: url(

"https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");

    }

    </style>

</head>

<body>

    <h1>

            CSS LIST

        </h1>

 <p> Unordered lists applying list-style-image </p>

    <ul>

        <li>ONE</li>

        <li>TWO</li>

        <li>THREE</li>

    </ul>

</body>

</html>

Output:

CSS_List_2.

List Marker Position

The position of the list item marker is specified by this property. To set the position of the marker relative to the item of the list, the property called list-style-position is used. “Outside” is its default value.

There are two types of position markers:

  • list-style-position: outside

In this position marker, the bullets or the markers are placed outside the list-item. The beginning of each line is aligned vertically.

Syntax:

list-style-position: outside;

Example:

In this example, the CSS list is described using different types of list-style-position, and the value is set to outside.

<!DOCTYPE html>

<html>

<head>

    <style>

    ul.ls {

        list-style-position: outside;

    }

    </style>

</head>

<body>

    <h2>

        CSS LISTS

    </h2>  

<p> Unordered lists applying list style position </p>

    <ul class="ls">

        <li>1

            <br>

        In this the bullet points will be outside of the list item.</li>

        <li>2

            <br>

        The start of each line of the list will be aligned vertically. </li>

        <li>3</li>

    </ul>

</body>

</html>

Output:

CSS_List_3.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

  • list-style-position: inside

In this position marker, the bullets or the markers are placed inside the list-item. The line along with the bullet point is aligned vertically.

Syntax:

list-style-position: inside;

Example:

Here, the CSS list is described using different types of list-style-position, and the value is set to inside.

<!DOCTYPE html>

<html>

<head>

    <style>

    ul.a {

        list-style-position: inside;

    }

    </style>

</head>

<body>

    <h2>

        CSS LIST

    </h2>

<p> Unordered lists applying list-style-position </p>

    <ul class="a">

        <li>1

            <br>

        In this the bullet points will be inside the list item.</li>

        <li>2

            <br>

        The line along with the bullet points will be aligned vertically.. </li>

        <li>3</li>

    </ul>

</body>

</html>

Output:

CSS_List_4

Shorthand Properties

Using this property, all the list properties can be set to one command. 

The order of the property is type, position, and image. If any of the values is missing, the default value will be inserted.

Example:

Below is a code example of the use of shorthand properties in CSS List.

<!DOCTYPE html>

<html>

<head>

    <style>

    ul.a {

        list-style: square inside;

    }

    </style>

</head>

<body>

    <h2>

    CSS LISTS

    </h2>  

<p> Unordered lists </p>

    <ul class="a">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

Output:

CSS_List_5

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

Styling List

Using this property, different colors, backgrounds etc. can be applied to the lists. This property enables us to format the lists in CSS.

Example:

In this code example, we are going to see the application of various style properties to the list elements.

<!DOCTYPE html>

<html>

<head>

    <style>

    ul.a {

        list-style: square;

        background: rgb(142, 168, 216);

        padding: 20px;

    }

    </style>

</head>

<body>

    <h2>

        CSS LISTS

    </h2>

<p> Unordered lists using styling list property  </p>

    <ul class="a">

        <li>one</li>

        <li>two</li>

        <li>three</li>

    </ul>

</body>

</html>

Output:

CSS_List_6.

Nested List

Whenever we need sub sections under any section, the nesting of the lists is needed.

Example:

In this code example, we are going to see how in CSS List, the nesting is done by putting one list under another.

<!DOCTYPE html>

<html>

<head></head>

<body>

    <h2>

        CSS LISTS

    </h2>

    <ul>

        <li> one

            <ul>

                <li>sub one</li>

                <li>sub two</li>

            </ul>

        </li>

        <li> two

            <ul>

                <li>sub one</li>

                <li>sub two</li>

            </ul>

        </li>

        <li> three

            <ul>

                <li>sub one</li>

                <li>sub two</li>

            </ul>

        </li>

    </ul>

</body> 

</html>

Output:

CSS_List_7

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion 

In this article, we have discussed the whole concept of CSS List and how it helps to arrange items and elements.

If you are interested in learning more about CSS and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics. 

Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 27 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads