Два блока не выделяются двумя цветами что делать?

пробую выделить цвет блока красным и ещё блок зелёным с помощью класса и всё выделяется зелёным

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Урок HTML разметки</title>
	<meta name='description' content="Урок HTML разметки">
	<meta name='keywords' content="'html,Lesson">
</head>
<body>
<div id="content"><h1>Урок HTML разметки</h1>
		<p>300 Тысяч фунтов стерлингов было потрачено британскими ученами на изучение взаймодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь который заменяет им душ.</p></div>


		<style type="text/css">
			

			.content {
				background-color: red;
			}
		</style>
		<div class="content"><h1>Урок HTML разметки</h1>
		<p>300 Тысяч фунтов стерлингов было потрачено британскими ученами на изучение взаймодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь который заменяет им душ.</p></div>


		<style type="text/css">
			

			.content {
				background-color: green;
			}
		</style>
</body>
</html>

html

css

1 ответов

Классы content по разному назови для разных блоков, а то стили последнего content перекрывают первый, поэтому один цвет.

Вот здесь пример есть, кнопка справа сверху Показать ответ:

https://fructcode.com/ru/courses/html-and-css/how-to-set-background-color-div-css/