Основы CSS: цвета, шрифты, отступы и рамки

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { background-color: #fff8e7; font-family: Arial, sans-serif; }
        h1 { color: tomato; font-size: 48px; }
        .card {
            background-color: lightblue;
            padding: 20px;
            margin: 30px;
            border: 3px dashed navy;
        }
    </style>
</head>
<body>
    <h1>Мой первый стиль</h1>
    <p class="card">Этот абзац в рамке и с отступами.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        h1 { color: red; }
        h2 { color: #1e90ff; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>Главный заголовок</h1>
    <h2>Подзаголовок</h2>
    <p>Обычный текст абзаца.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .card {
            padding: 20px;
            margin: 30px;
            border: 3px solid orange;
            border-radius: 10px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Кот Барсик</h2>
        <p>Любит спать и есть.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        h1 { text-transform: uppercase; }
        p { text-align: center; }
        a { text-decoration: none; }
        .note { font-weight: bold; font-style: italic; }
    </style>
</head>
<body>
    <h1>Новости школы</h1>
    <p>Сегодня мы научились делать сайты!</p>
    <a href="#">Читать дальше</a>
    <p class="note">Домашку сдать до пятницы.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .name { color: tomato; }
        .hex { color: #2ecc71; }
        .rgb { color: rgb(52, 152, 219); }
    </style>
</head>
<body>
    <p class="name">Цвет словом</p>
    <p class="hex">Цвет HEX-кодом</p>
    <p class="rgb">Цвет в RGB</p>
</body>
</html>