Шаг 4 из 5 · 10–15 минут

Оформление CSS

Шрифт, цвет и карточка

HTML отвечает за содержание, CSS — за внешний вид. Стили можно написать прямо на странице, в теге <style>. До этого шага песочница сама подставляла простой шрифт — теперь оформление в ваших руках.

Правило CSS — это селектор и свойства в фигурных скобках: h1 { color: #1f6f4a; } делает все заголовки h1 зелёными. Пары «свойство: значение;» разделяют точкой с запятой.

Полезные свойства: font-family — шрифт, color — цвет текста, background — фон, padding — внутренний отступ, border-radius — скругление углов.

Пример

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  h1 { color: #1f6f4a; }
  section { background: #eef6f1; padding: 16px; border-radius: 12px; }
</style>

Задание

Добавьте тег style в начало кода.
Задайте шрифт для body через font-family.
Измените цвет заголовка h1.
Сделайте section карточкой: фон, внутренний отступ и скругление.

Загружаем ваш код…