---

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Фенек</title>
    <!-- Подключаем внешний файл стилей -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Фенек</h1>
    
    <!-- Вставляем картинку фенека -->
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Fennec_Fox_Vulpes_zerda.jpg/640px-Fennec_Fox_Vulpes_zerda.jpg" alt="Фенек">
    
    <p>
        Фенек (лат. Vulpes zerda) — миниатюрная лисица своеобразной внешности, которая живёт в пустынях Северной Африки. 
        Внешний вид: <br>
        Фенек — самый маленький представитель семейства псовых, по размерам он меньше домашней кошки. Высота в холке — 18–22 см, длина тела — 30–40 см, хвоста — до 30 см, весит он до 1,5 кг. Морда короткая, заострённая. Глаза большие. Уши фенека — самые большие среди хищных млекопитающих по отношению к величине головы: они достигают 15 см в длину. 
    </p>

    <p class="distribution">
        Распространение: <br>
        Самая многочисленная популяция фенека обитает в центральной Сахаре, хотя они встречаются от северного Марокко до Синайского и Аравийского полуостровов, а на юге — до Нигера, Чада и Судана.
    </p>

</body>
</html>


Второе 


/* Стили для всей страницы */
body {
    /* Шрифт без засечек */
    font-family: Arial, sans-serif; 
    /* Отступ сверху 50px, как в примере на стр. 2 */
    margin-top: 50px; 
    /* Рамка: 5 пикселей, сплошная, зеленая */
    border: 5px solid green; 
    /* Внутренний отступ, чтобы текст не прилипал к рамке */
    padding: 20px;
    /* Цвет фона страницы */
    background-color: #f9f9f9;
}

/* Стили для заголовка h1 (Фенек) */
h1 {
    /* Цвет заголовка - оранжевый, как указано в задании */
    color: orange;
    /* Выравнивание по центру */
    text-align: center;
    /* Размер шрифта */
    font-size: 36px;
    /* Отступ снизу */
    margin-bottom: 20px;
}

/* Стили для картинки */
img {
    /* Делаем картинку блочным элементом, чтобы её можно было выровнять по центру */
    display: block;
    /* Выравнивание по центру */
    margin: 0 auto 20px auto; 
    /* Ограничиваем максимальную ширину, чтобы картинка не была огромной */
    max-width: 100%;
    width: 400px; 
    /* Скругленные углы для красоты */
    border-radius: 10px; 
}

/* Стили для основного текста (абзацы) */
p {
    /* Цвет текста - dim gray (темно-серый), как в задании */
    color: dimgray;
    /* Выравнивание по ширине */
    text-align: justify; 
    /* Межстрочный интервал для читаемости */
    line-height: 1.6;
    /* Размер шрифта */
    font-size: 18px;
    /* Отступы между абзацами */
    margin-bottom: 20px;
}

/* Дополнительный класс для блока "Распространение", 
   чтобы выделить его (например, курсивом) */
.distribution {
    font-style: italic;
    /* Добавим легкую рамку слева для акцента */
    border-left: 4px solid orange;
    padding-left: 15px;
}