Не получается выделить разными цветами 2 блочных элемента
Добрый вечер! Не получается создать два самостоятельных разноцветных блока. Все закрашиввается одним цветом -зеленым, хотя в одном блоке указан красный цвет . Не подскажете в чем ошибка?
<!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>
<h1>Урок HTML разметки</h1>
<div class="content">
<p>Волнистые попугаи — самые популярные домашние питомцы среди всех пернатых. Их любят за жизнелюбие, веселый нрав, высокие умственные способности, яркое оперение и неприхотливость к условиям содержания. Их заводят в семьях с маленькими детьми, начинающие владельцы птиц и одинокие люди. В этой статье вы узнаете все о волнистых попугайчиках, как они живут на воле и в домашних условиях. Как купить лучшего пернатого питомца, как за ним ухаживать и чему его можно обучить. Вы найдете информацию о разведении этих птичек, их болезнях и продолжительности жизни.</p>
</div>
<style type="text/css">
.content{background-color: red;}
</style>
<div class="content">
<p>Волнистые попугаи — самые популярные домашние питомцы среди всех пернатых. Их любят за жизнелюбие, веселый нрав, высокие умственные способности, яркое оперение и неприхотливость к условиям содержания. Их заводят в семьях с маленькими детьми, начинающие владельцы птиц и одинокие люди. В этой статье вы узнаете все о волнистых попугайчиках, как они живут на воле и в домашних условиях. Как купить лучшего пернатого питомца, как за ним ухаживать и чему его можно обучить. Вы найдете информацию о разведении этих птичек, их болезнях и продолжительности жизни.</p>
</div>
<style type="text/css">
.content{background-color: green;}
</style>
</body>
</html>
