Welcome to the first chapter of the CSS Variables course! Here, you'll get hands-on experience with the basics of creating and using CSS variables.

How to Complete This Chapter

1. Check out this interactive tutorial to learn the basics of CSS Custom Properties.
2. Come back and complete this practice task to track your progress.
3. Sharpen your skills with variable practice.

Your Task

Make sure your result matches the example exactly. Here’s what you need to do:

• Add the missing CSS variable in :root and set it to #141414.
• Use an existing CSS variable in the right places within the styles.

Solution

The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.

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

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

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

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

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