Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

Styling List With Colors in HTML and CSS

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