0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p><b>How to Complete This Chapter</b></p>
2
<p><b>How to Complete This Chapter</b></p>
3
<ol><li>Check out this<a>interactive tutorial</a>to learn the basics of CSS Custom Properties.</li>
3
<ol><li>Check out this<a>interactive tutorial</a>to learn the basics of CSS Custom Properties.</li>
4
<li>Come back and complete this practice task to track your progress.</li>
4
<li>Come back and complete this practice task to track your progress.</li>
5
<li>Sharpen your skills with<a>variable practice</a>.</li>
5
<li>Sharpen your skills with<a>variable practice</a>.</li>
6
</ol><p><b>Your Task</b></p>
6
</ol><p><b>Your Task</b></p>
7
<p>Make sure your result matches the example exactly. Here’s what you need to do:</p>
7
<p>Make sure your result matches the example exactly. Here’s what you need to do:</p>
8
<ul><li>Add the missing CSS variable in :root and set it to #141414.</li>
8
<ul><li>Add the missing CSS variable in :root and set it to #141414.</li>
9
<li>Use an existing CSS variable in the right places within the styles.</li>
9
<li>Use an existing CSS variable in the right places within the styles.</li>
10
</ul><p><strong>Solution</strong></p>
10
</ul><p><strong>Solution</strong></p>
11
<p>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.</p>
11
<p>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.</p>
12
:root { --page-color: #141414; } body { background-color: var(--page-color); } .card { --color: #3370ce; } .card__title { color: var(--color); } .card__button { background-color: var(--color); }
12
:root { --page-color: #141414; } body { background-color: var(--page-color); } .card { --color: #3370ce; } .card__title { color: var(--color); } .card__button { background-color: var(--color); }