Dynamic CSS Example
example using CSS custom properties (CSS variables) and JavaScript to update those variables dynamically.  ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="box"></div> <button onclick="changeColor()">Change Color</button> <script src="script.js"></script> </body> </html> ``` Css(styles.css) ```css :root { --box-color: blue; } #box { width: 100px; height: 100px; background-color: var(--box-color); } ``` Javascript (script.js) ```js function changeColor() { // Get the box element var box = document.getElementById("box"); // Random color generator var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); // Update the CSS variable value box.style.setProperty('--box-color', randomColor); } ``` In this example, when you click the "Change Color" button, it calls the changeColor() function which generates a random color and applies it to the CSS variable --box-color, which is then used to set the background color of the #box element.