Урок 10. Решения: Введение в CSS и подключение стилей

📁 Раздел: Основы CSS ⏱️ Время изучения: ~35 мин 🎯 Сложность: Начальная
#link #body

⚡ Кратко

Сверяйтесь с решениями после собственной попытки, иначе практика превращается в чтение.

Эталонное решение

Полная связка из заданий: index.html с подключённым внешним style.css, светлый фон страницы и оформленная карточка. Сверху — как это выглядит в браузере.

Карточка курса

Структура — это HTML, оформление — это CSS.

<!-- index.html -->
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h2>Карточка курса</h2>
    <p>Структура — это HTML, оформление — это CSS.</p>
  </div>
</body>
/* style.css */
body {
  font-family: sans-serif;
  background: #f4f7fb;
}
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
}
.card h2 { color: #0f766e; }

Как проверять себя

  1. Файл CSS лежит по тому пути, который указан в href.
  2. В <head> есть строка <link rel="stylesheet" href="style.css">.
  3. Для проверки измените заметное свойство, например background у body.
  4. Если ничего не поменялось — обновите страницу без кэша и проверьте DevTools.
Критерий готовности: вы можете изменить пример под новую задачу и объяснить, почему результат изменился.