CSS Variables – The ability to produce dynamic and customisable design effects is essential in the field of web development. Custom properties, or CSS variables, provide a way to this realm which allows developers to specify reusable values within stylesheets and modify them dynamically during runtime. This blog post will explore CSS variables with a practical example that highlights their dynamic capability.
Understanding CSS Variables
A stylesheet’s reusable values can be defined and used throughout by using CSS variables. They are declared using the — prefix followed by a name, typically within the :root pseudo-class for global availability. They can be used to store values like fonts, colors, width, height etc. These variables can even be used across other files once they are defined in the CSS code.(Read More)
This is how a CSS variable is defined:
:root {
--main-color: #3498db;
}
In this example, we’ve defined a variable named –main-color and its value is #3498db. We’ve declared it within the :root pseudo-class, which ensures that the variable is accessible everywhere in the CSS code.
How to Use CSS Variables
Once defined, you can use CSS variables anywhere in your CSS code by using the var() function to access them.
Var():
The CSS variable var() allows you to enter the value of a custom property to replace part of the value of another property..
Syntax :
var(--custom-property);
Example :
.element {
color: var(--main-color);
}
In this example, we are using the –main-color variable to set the text color of an element. If you decide to change the main color later on, all you can do is update the value of the variable, and it will automatically reflect across all elements where it’s used.
1.Creating Dynamic Theme Colors
Output
Consider a situation where you would like to design a webpage where the theme colour changes dynamically. You want to be able to provide users the option to click a button and then see the page’s entire colour scheme change. Let’s see how CSS variables can make this possible.(Read More about CSS Variable)
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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>Dynamic Theme - CSS Variables</h1>
</header>
<button id="changeColorBtn">Change Theme Color</button>
<script src="script.js"></script>
</body>
</html>
CSS:
:root {
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin: 20px;
border-radius: 5px;
}
Javascript:
document.getElementById('changeColorBtn').addEventListener('click', function() {
// Generate a random hex color
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
// Set the random color as the new primary color
document.documentElement.style.setProperty('--primary-color', randomColor);
});
This example shows a webpage with a button and a header. The background colour of the button and the header are customised using the –primary-color CSS variable, which has a default value of #3498db. A JavaScript script creates a random hexadecimal colour code upon clicking the button, which is then assigned as the new value of the –primary-color variable. As a result, users are given an interesting and interactive experience as the theme colour of the button and header dynamically changes.
Conclusion
In web development, CSS variables offer a versatile and effective method of managing styles. By defining reusable values and applying them dynamically, developers can create more maintainable and customizable websites. CSS variables provide an extensive toolset to improve the style capabilities of your online projects, whether the focus is on theming, responsiveness, or animation. To fully utilise them in your designs, begin integrating them into your CSS workflow!(Read More about CSS variable)
Top comments (0)