What Types Of Lists Are There In Css

Posted By Bajarangi soft , Posted On 30-09-2020

In HTML, there are two main types of lists unordered lists (<ul>) - the list items are marked with bullet,ordered lists (<ol>) - the list items are marked with numbers or letters,The CSS list properties allow you to,Set different list item markers for ordered lists,Set different list item markers for unordered lists,Set an image as the list item marker,Add background colors to lists and list items.

1.Different List Item Markers

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.a {
            list-style-type: circle;
        }

        ul.b {
            list-style-type: square;
        }

        ol.c {
            list-style-type: upper-roman;
        }

        ol.d {
            list-style-type: lower-alpha;
        }
    </style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<ul class="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ol class="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

</body>
</html>

2.An Image as The List Item Marker

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-image: url('sqpurple.gif');
        }
    </style>
</head>
<body>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

</body>
</html>

3.Styling List With Colors

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            background: #ff9999;
            padding: 20px;
        }

        ul {
            background: #3399ff;
            padding: 20px;
        }

        ol li {
            background: #ffe5e5;
            padding: 5px;
            margin-left: 35px;
        }

        ul li {
            background: #cce5ff;
            margin: 5px;
        }
    </style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

</body>
</html>

Related Post

How To Create Horizontal List View With Example In Flutter
Flutter List View In Widget With Vertical With Example
How To Add Todo List Mark In Flutter Android App
Learn How TO Delete Listview Item In Flutter Android App
List Of Artisan Commands Used In Laravel Framework
List The Available Validation Rules In Laravel With Example
List The Conditional Validation Rules In Laravel Framework
How To Use HTML DOM AddEventListener Method In JavaScript
How To Use HTML DOM RemoveEventListener Method In JavaScript
Different Types Of Lists supported By Html
List Of HTML DOM Event In JavaScript With Examples