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
width, border-top-width, height --event-width --event-border-width --time-width --image-placeholder-size<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
width, border-top-width, height --event-width --event-border-width --time-width --image-placeholder-size<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 { width: var(--event-width); border-top-width: var(--event-border-width); } .time { width: var(--time-width); } .image-placeholder { width: var(--image-placeholder-size); height: var(--image-placeholder-size); }
7
.event { width: var(--event-width); border-top-width: var(--event-border-width); } .time { width: var(--time-width); } .image-placeholder { width: var(--image-placeholder-size); height: var(--image-placeholder-size); }