CSS Variables, also known as Custom Properties, are a powerful feature introduced in CSS that allow you to define reusable values to be used throughout your CSS code. They provide more flexibility and maintainability compared to traditional hardcoded values.
Syntax:
CSS Variables are defined using the -- prefix followed by a name and a value. Here's how you can define a CSS variable:
:root { --primary-color: #007bff; }
In this example, --primary-color is the name of the variable, and #007bff is its value. The :root pseudo-class is used to define variables globally within the document.
Using CSS Variables:
Once you've defined a variable, you can use it anywhere in your CSS code by referencing its name inside var() function. For example:
.element { color: var(--primary-color); }
Here, var(--primary-color) will be replaced with the value of --primary-color, which is #007bff. This allows you to easily update the value of --primary-color in one place and have it propagate throughout your stylesheet.
Inheritance and Override:
CSS Variables follow the cascade and inheritance rules of CSS, which means they can be overridden by more specific declarations. For example:
:root { --primary-color: #007bff; } .element { --primary-color: #ff0000; /* Overrides the global variable */ color: var(--primary-color); }
In this case, the --primary-color variable defined within the .element selector will override the global variable defined in :root for that specific element.
Dynamic Changes with JavaScript:
One of the key benefits of CSS Variables is that they can be dynamically modified using JavaScript, allowing for dynamic theming and responsive design adjustments based on user interactions or environmental factors.
document.documentElement.style.setProperty('--primary-color', '#ff0000');
This JavaScript code will dynamically change the value of the --primary-color variable to #ff0000 at runtime.
Browser Support:
CSS Variables are widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and others. However, it's essential to consider fallbacks or polyfills for older browsers that do not support CSS Variables if you need to support them.
CSS Variables offer a powerful way to manage and reuse values in your CSS codebase, improving maintainability and flexibility. Experiment with them in your projects to see how they can streamline your styling workflow.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Variables Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a paragraph with some text.</p> <button id="theme-toggle">Toggle Theme</button> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
:root { --primary-color: #007bff; --secondary-color: #6c757d; } body { font-family: Arial, sans-serif; background-color: var(--primary-color); color: var(--secondary-color); } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: var(--primary-color); } button { background-color: var(--primary-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; }
JavaScript (script.js):
const themeToggleBtn = document.getElementById('theme-toggle'); themeToggleBtn.addEventListener('click', () => { document.documentElement.style.setProperty('--primary-color', '#ff6347'); });
In this example:
- We have an HTML file containing a simple webpage structure with a heading, paragraph, and a button.
- We link an external CSS file (styles.css) to style the elements. In the CSS file, we define CSS Variables
--primary-colorand--secondary-color, which are used to control the primary and secondary colors of the webpage. - We also have JavaScript code (script.js) that listens for a click event on the button with the id "theme-toggle" and dynamically changes the value of the
--primary-colorvariable when the button is clicked. - When the button is clicked, the
--primary-colorvariable is updated to a new color (#ff6347), resulting in a change in the primary color of the webpage.
This example demonstrates how CSS Variables can be used to create dynamic and customizable styles in a webpage.
0 Comments