CSS Variables : The Key to Empowering Your Stylesheets-CSS Tutorial-php.cn

CSS Variables : The Key to Empowering Your Stylesheets

WBOY

Release： 2024-07-19 21:25:11

Original

422 people have browsed it

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;
}

Copy after login

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);

Copy after login

Example :

.element {
  color: var(--main-color);
}

Copy after login

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:

<!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>

Copy after login

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;
}

Copy after login

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);
});

Copy after login

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)

The above is the detailed content of CSS Variables : The Key to Empowering Your Stylesheets. For more information, please follow other related articles on the PHP Chinese website!