В курсе html/css на 12 уроке(где видео урок) не могу выполнить домашнее задание. поможет кто-нибудь?

На 12 уроке, где еще идет видео урок дано домашнее задание. Надо оформить два текста с применением блочного элемента <div>. Первый текст надо оформить с зеленым фоном, второй с красным фоном. В итоге когда я ко второму тексту применяю стиль красного фона.

Вот сам код:

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

		<style type="text/css">
			.content{ 
			background:green;
			 }
		</style>

	<div class="content">
		<H1>Урок HTML разметки</H1>       
		<p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем 
                заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, 
                чем полные.</p>
	</div>
		<style type="text/css">
			.content{
				background: red;
			}
		</style>

</body>
</html>

html

css

1 ответов

Вы в стилях задаете одно и тоже название класса .content. Стили так работают, что если задать два стиля с одинаковыми названиями, сработает последний.

Вот в этом уроке живой пример есть, если нажать на кнопку Показать ответ в углу сверху справа:

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