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)

","image":"http://www.luping.net","datePublished":"2024-07-31T20:24:02+08:00","dateModified":"2024-07-31T20:24:02+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > CSS Variables : The Key to Empowering Your Stylesheets

CSS Variables : The Key to Empowering Your Stylesheets

Published on 2024-07-31
Browse:780

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

Creating Dynamic Theme Colors

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:



  CSS Variables

Dynamic Theme - CSS Variables

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)

Release Statement This article is reproduced at: https://dev.to/code_passion/css-variables-the-key-to-empowering-your-stylesheets-1b0n?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3