@codeswithpankaj

CSS Lists

CSS Lists Tutorial - codeswithpankaj.com

CSS provides various properties to style lists, both ordered (<ol>) and unordered (<ul>). This tutorial will cover list-style-type, list-style-position, list-style-image, and the list shorthand property.

1. List Style Type

The list-style-type property specifies the type of list-item marker (bullet or number).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS List Style Type - codeswithpankaj.com</title>
    <style>
        ul {
            list-style-type: square;
        }
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
    <ol>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ol>
</body>
</html>

In this example, the unordered list uses square bullets, and the ordered list uses upper Roman numerals.

2. List Style Position

The list-style-position property specifies the position of the list-item markers (bullets or numbers). It can be inside or outside.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS List Style Position - codeswithpankaj.com</title>
    <style>
        ul.inside {
            list-style-position: inside;
        }
        ul.outside {
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <ul class="inside">
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
    <ul class="outside">
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
</body>
</html>

Here, the first unordered list has markers inside the list item, and the second has markers outside the list item.

3. List Style Image

The list-style-image property replaces the list-item marker with an image.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS List Style Image - codeswithpankaj.com</title>
    <style>
        ul {
            list-style-image: url('https://example.com/image.png');
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
</body>
</html>

In this example, the list items use an image as the marker.

4. List Shorthand Property

The list-style shorthand property is used to set list-style-type, list-style-position, and list-style-image in one declaration.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS List Shorthand - codeswithpankaj.com</title>
    <style>
        ul {
            list-style: circle inside;
        }
        ol {
            list-style: lower-alpha outside;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
    <ol>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ol>
</body>
</html>

Here, the unordered list uses circular markers inside the list item, and the ordered list uses lower alpha markers outside the list item.

5. Custom List Markers

You can create custom list markers using pseudo-elements and CSS.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Custom List Markers - codeswithpankaj.com</title>
    <style>
        ul {
            list-style: none;
            padding-left: 0;
        }
        ul li {
            position: relative;
            padding-left: 20px;
        }
        ul li::before {
            content: '\2022'; /* Bullet character */
            position: absolute;
            left: 0;
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1 - codeswithpankaj</li>
        <li>Item 2 - codeswithpankaj</li>
    </ul>
</body>
</html>

In this example, custom list markers are created using the ::before pseudo-element and CSS content property.

This tutorial covers essential CSS properties for styling lists. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS LinksNextCSS Tables

Last updated