CSS Variables Interpolation
Medium
11
77.1% Acceptance
In this lab, you will explore how to use CSS variables (also known as custom properties) to create a more modular and maintainable styling. You will create an index.html
file with a div
element and a CSS variable --primaryColor
with a color value. Then, you'll use this CSS variable to set the background color of the div
element.
Additionally, you will create a JavaScript function that changes the value of the --primaryColor
variable when the user clicks on the div
element. This will showcase the power and flexibility of CSS variables.
Concepts to learn: CSS variables, JavaScript event listeners, CSS variable manipulation using JavaScript.
Hint: Use
document.documentElement.style.setProperty
to manipuate the CSS Variables