0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Your task is to create some CSS variables and give them values.</p>
1
<p>Your task is to create some CSS variables and give them values.</p>
2
<p>The styles for this component are<em>purposely</em>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.</p>
2
<p>The styles for this component are<em>purposely</em>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.</p>
3
<p>You’ll find the possible variable names and values listed below. Just remember, the font size should be a multiple of 5.</p>
3
<p>You’ll find the possible variable names and values listed below. Just remember, the font size should be a multiple of 5.</p>
4
color-gold, color-purple, color-orange, title-font-size #e64a19 #7b1fa2 #fbc02d<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
4
color-gold, color-purple, color-orange, title-font-size #e64a19 #7b1fa2 #fbc02d<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
5
<p><strong>Solution</strong></p>
5
<p><strong>Solution</strong></p>
6
<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>
6
<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>
7
:root { --color-gold: #fbc02d; --color-purple: #7b1fa2; --color-orange: #e64a19; --title-font-size: 25px; }
7
:root { --color-gold: #fbc02d; --color-purple: #7b1fa2; --color-orange: #e64a19; --title-font-size: 25px; }