From f3d1df4ce564e274f374ae515f95c9eb69987f01 Mon Sep 17 00:00:00 2001 From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com> Date: Fri, 30 Jan 2026 15:46:53 +0530 Subject: [PATCH] feat(curriculum): add interactive examples to css variables (#65373) Co-authored-by: Jeevankumar-S Co-authored-by: zaira --- .../review-css-variables/671a98fbaabfba994e3d9a7c.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/review-css-variables/671a98fbaabfba994e3d9a7c.md b/curriculum/challenges/english/blocks/review-css-variables/671a98fbaabfba994e3d9a7c.md index 26b216bf81d..95337b467bd 100644 --- a/curriculum/challenges/english/blocks/review-css-variables/671a98fbaabfba994e3d9a7c.md +++ b/curriculum/challenges/english/blocks/review-css-variables/671a98fbaabfba994e3d9a7c.md @@ -5,7 +5,7 @@ challengeType: 31 dashedName: review-css-variables --- -# --description-- +# --interactive-- ## CSS Custom Properties (CSS Variables) @@ -46,7 +46,11 @@ body { - **`initial-value`**: This sets the default value of the property. - **Gradient Example Using the `@property` Rule**: This example creates a gradient that smoothly animates when the element is hovered over. +:::interactive_editor + ```html + +
``` @@ -69,6 +73,8 @@ body { } ``` +::: + - **Fallbacks**: When using the custom property, you can provide a fallback value using the `var()` function, just as you would with standard custom properties: ```css