Первая страница со стилями

Файлы

Создайте папку с двумя файлами. Для работы хватит любого текстового редактора, но удобнее редактор кода, например VS Code.

my-page/
├─ index.html
└─ style.css

Разметка

В index.html — обычная страница с заголовком, абзацами и списком. Стили подключены элементом link:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Рецепт блинов</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="recipe">
      <h1>Блины на молоке</h1>
      <p class="recipe__lead">Тонкие, с кружевными краями. Хватит на 15 штук.</p>
      <h2>Что понадобится</h2>
      <ul>
        <li>Молоко — 500 мл</li>
        <li>Яйца — 2 шт.</li>
        <li>Мука — 200 г</li>
      </ul>
      <p>Смешайте всё до однородности и дайте тесту постоять 15 минут.</p>
    </main>
  </body>
</html>

Откройте файл в браузере двойным кликом. Страница уже работает, но выглядит как документ 1995 года.

Стили

Теперь заполните style.css. Начните с общих настроек текста для всей страницы, затем ограничьте ширину колонки и оформите детали.

<main class="recipe">
  <h1>Блины на молоке</h1>
  <p class="recipe__lead">Тонкие, с кружевными краями. Хватит на 15 штук.</p>
  <h2>Что понадобится</h2>
  <ul>
    <li>Молоко — 500 мл</li>
    <li>Яйца — 2 шт.</li>
    <li>Мука — 200 г</li>
  </ul>
  <p>Смешайте всё до однородности и дайте тесту постоять 15 минут.</p>
</main>

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #2b2b2b;
  background: #fffaf2;
}

.recipe {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 {
  margin-top: 0;
  color: #b3541e;
}

.recipe__lead {
  font-size: 1.2rem;
  color: #6b6b6b;
}

Что здесь происходит:

• у body задан шрифт, межстрочный интервал и цвета — они наследуются всеми элементами внутри;
• max-width: 36rem не даёт строкам растянуться на весь широкий экран — длинные строки трудно читать;
• margin: 0 auto ставит колонку по центру;
• padding оставляет поля, чтобы на телефоне текст не прилипал к краям.

Проверьте себя в инструментах

Откройте инструменты разработчика и выберите абзац с классом recipe__lead. На панели Styles вы увидите правило .recipe__lead, а ниже — унаследованные от body свойства. На панели Computed найдите color и убедитесь, что значение взято из вашего правила, а не из body.

Поэкспериментируйте: поменяйте цвет заголовка или ширину колонки прямо в инструментах, а удачный вариант перенесите в style.css.