Styling List With Colors in HTML and CSS

By: Prof. Fazal Rehman Shamil
Last modified on October 27th, 2020

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”

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

  1. mango
  2. banana