Styling List With Colors in HTML and CSS

In this tutorial, we will learn the code of “Styling List With Colors in HTML and CSS”.

ol {
background: purple;
padding: 30px;
}

ul {
background: grey;
padding: 35px;
}

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

ul li {
background: lightpink;
margin: 10px;
}

</style>
</head>
<body>

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

<ol>
<li>Tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ol>

<ul>
<li>tea</li>
<li>Sandwich</li>
<li>Coca-Cola</li>
</ul>

</body>
</html>

How to start a list with a specifin number?

We can start a list with a specifin number by adding the start property with <ol>.

For example;

<li>mango</li>

<li>banana</li>

</ol>

Output

Styling List With Colors in HTML and CSS
By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022