0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In this challenge, you only know the names of the existing variables. Your task is to use them to set the right properties for the elements.</p>
1
<p>In this challenge, you only know the names of the existing variables. Your task is to use them to set the right properties for the elements.</p>
2
<p>The CSS rules are already in place, but they’re empty. Here are the variable and property names you’ll be working with:</p>
2
<p>The CSS rules are already in place, but they’re empty. Here are the variable and property names you’ll be working with:</p>
3
background, border-top-color, color --event-approved-bg --event-approved-color --event-declined-bg --event-declined-color<p>The actual variable values are hidden on purpose, so you can’t just use regular CSS values - you have to rely on the variables!</p>
3
background, border-top-color, color --event-approved-bg --event-approved-color --event-declined-bg --event-declined-color<p>The actual variable values are hidden on purpose, so you can’t just use regular CSS values - you have to rely on the variables!</p>
4
<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
4
<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
.event-approved { background: var(--event-approved-bg); border-top-color: var(--event-approved-color); } .event-declined { background: var(--event-declined-bg); border-top-color: var(--event-declined-color); } .time { color: var(--event-approved-color); } .event-declined .time { color: var(--event-declined-color); }
7
.event-approved { background: var(--event-approved-bg); border-top-color: var(--event-approved-color); } .event-declined { background: var(--event-declined-bg); border-top-color: var(--event-declined-color); } .time { color: var(--event-approved-color); } .event-declined .time { color: var(--event-declined-color); }