By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022
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”.
Code of “Styling List With Colors in HTML and CSS”
<html>
<head>
<style>
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>
<img src=”logo.jpg”/>
</body>
</html>
The output of code of “Styling List With Colors in HTML and CSS”
Figure: Styling List With Colors in HTML and CSS
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;
<ol start=”50″>
<li>mango</li>
<li>banana</li>
</ol>Output
