CSS Lists Styling with Colors Example

<!Doctype HTML>
<html>
<head>
<title>CSS lists Styling with Colors</title>
<style>
ul.list1 {
	background: #3949ab;
	padding: 20px;
}
ul.list1 li {
	background: #55555599;
	margin: 5px;
	color: #fff;
	padding: 5px;
}
ul.list2{
	background: #3949ab55; 
	padding: 20px;
	padding-left: 30px; 
	margin: 20px;
	border-left: 5px solid #3949ab; 
	list-style-type: none;
}
ul.list2 li{
	border: 1px solid #55555599; 
	padding: 5px; 
	color: #3949ab; 
	border-left: 5px solid #3949ab;
}
</style>
</head>
<body>
	<h2>CSS lists Styling with Colors</h2>
	<hr>
	Top 5 Richest people in the world:<br>
	<ul class="list1">
	<li>Bill Gates</li>
	<li>Elon Musk</li>
	<li>Jeff Bezos</li>
	<li>Mark Zuckerberg</li>
	<li>You :)</li>
	</ul>
	<hr>
	Top 3 Car brands in the world:<br>
	<ul class="list2">
	<li>Porsche</li>
	<li>Genesis</li>
	<li>Subaru</li>
	</ul>
</body>
</html>