• Theory
  • Theory

Custom Properties, Mastery Challenge 1

Your job is to fix the mistakes in how the CSS variables are declared.

The styles for this component are purposely placed inside the style tag in the HTML editor. The editor is locked, so you can only edit the styles where the CSS variables are set up.

This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.

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 {
/* Colors */
--background-color: #f5f7fa;
--card-background-color: #ffffff;
--text-color-primary: #fff;
--text-color-secondary: #eee;
--progress-bg-color: #ffffff;
--bg-dream-car: #a99eff;
--bg-house-saving: #ffb572;
--bg-laptop: #ff98c8;
--icon-dream-car: #e4d7fc;
--icon-house-saving: #fde4cf;
--icon-laptop: #fcd3e1;

/* Sizes */
--card-border-radius: 16px;
--icon-size: 40px;
--progress-height: 8px;
--gap-size: 20px;
--padding-size: 20px;

/* Font parameters */
--font-family: Arial, sans-serif;
--font-size-title: 16px;
--font-size-progress: 14px;
--font-weight-title: bold;
}
  • index.html
HTML
HTML

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Granny Muffin

Easy there, pal!

To access the Introduction to CSS Custom Properties challenges in the CSS Custom Properties, you need to sign up and subscribe first.