List Style Settings

List Style Settings

The styles for lists include list item symbols and list item images.
::: normal-demo Ordered List

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol { list-style-type: lower-roman; }
    </style>
</head>
<body>
<h3>Ordered List</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

:::
Unordered List
::: normal-demo Unordered List

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul { list-style-type: circle; }
    </style>
</head>
<body>
    <h3>Unordered List</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

:::
Symbol-less List
::: normal-demo Symbol-less List

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol, ul { list-style-type: none; }
    </style>
</head>
<body>
    <h3>Ordered List</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <h3>Unordered List</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

:::

list-style-image (List Item Image)

::: normal-demo List Item Image Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul { list-style-image: url(/static/front-end/css3/earth.png); }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

:::