Добро пожаловать в первую главу курса по CSS-переменным! В ней вы изучите и закрепите на практике основы создания и использования CSS-переменных.

План прохождения главы

1. Изучите интерактивный туториал про основы пользовательских свойств (CSS Custom Properties).
2. Вернитесь и выполните это практическое задание, чтобы сохранить прогресс прохождения курса.
3. Доведите до автоматизма навыки работы с CSS-переменными с помощью вариативной практики.

Ваша задача

Добейтесь, чтобы ваш результат полностью соответствовал образцу. Для этого проанализируйте код стилей, а затем:

• Объявите недостающую CSS-переменную в :root и задайте ей значение #141414.
• Используйте значение другой CSS-переменной в CSS-свойствах, где она нужна.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

:root {
  --page-color: #141414;
}

body {
  background-color: var(--page-color);
}

.card {
  --color: #3370ce;
}

.card__title {
  color: var(--color);
}

.card__button {
  background-color: var(--color);
}