Как сделать разные цвета блоков?

При выполнении домашнего задания, где надо сделать 2 текстовых блока и сделать разноцветный бекграунд, почему-то оба блока перекрашивались либо только в зеленый, либо только в красный.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Урок HRML разметки</title>
    <meta name="description" content="Урок HTML разметки">
    <meta name="keywords" content="html,Lesson">
    
</head>
<body>
	<div class="content">
		<h1>Урок HTML разметки</h1>
		<p>Эпицентр землетрясения расположен в 688 км на запад от Алматы на границе Казахстана и Узбекистана.</p>
		<p>Энергетический класс землетрясения 9.1. Магнитуда MPV 4.0. Координаты эпицентра 41.22° с.ш. 69.01° в.д. Глубина 20 км. Сведения об ощутимости (по шкале МSК-64): нет.</p>
	</div>

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

	</style>



	
	<div class="content">
		<h1>Урок HTML разметки</h1>
		<p>Эпицентр землетрясения расположен в 688 км на запад от Алматы на границе Казахстана и Узбекистана.</p>
		<p>Энергетический класс землетрясения 9.1. Магнитуда MPV 4.0. Координаты эпицентра 41.22° с.ш. 69.01° в.д. Глубина 20 км. Сведения об ощутимости (по шкале МSК-64): нет.</p>
	</div>

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

	</style>

	
</body>
</html>

html

1 ответов

У вас название класса у обоих блоков content. В стилях css, стили для .content, последнем задается background-green. Можно написать хоть 20 стилей для .content, но css так устроен, что стили друг друга могут перекрывать, т.е. последнее описание для класса .content считается приоритетным, по этому у вас все блоки с одинаковым классом .content зеленые.

Вот в этом уроке смотрите правильное решение (кнопка Показать ответ справа сверху):

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