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

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

⚡ Кратко

Сделайте задания по порядку: каждое следующее опирается на предыдущее.

Практические задания

  1. Создайте index.html и style.css в одной папке.
  2. Подключите style.css через тег <link> в <head>.
  3. Задайте странице светлый фон, основной цвет текста и семейство шрифта.
  4. Добавьте класс .card и оформите блок с заголовком и описанием.
  5. Намеренно ошибитесь в пути к CSS, обновите страницу и объясните, что изменилось.

Ожидаемый результат

После шагов 1–4 страница в браузере должна выглядеть примерно так — оформленная карточка на светлом фоне:

Заголовок карточки

Описание карточки в две строки.

/* ориентир, точные значения выбираете сами */
body { background: #f4f7fb; font-family: sans-serif; }
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
Шаг 5: когда сломаете путь в href, карточка потеряет фон и рамку — вернётся вид «голого» HTML. Это и есть признак, что CSS не подключился.