CSS variables usage and sample code
CSS Variable Usage and Example Code
CSS variables are a very useful feature that can help us reuse values throughout our stylesheets, improving code maintainability and flexibility. CSS variables, also known as custom properties, begin with --, similar to --main-color: #ff0000;. In this article, we’ll take a detailed look at CSS variables and provide example code.
Declaring and Using CSS Variables
To declare a CSS variable, simply define the variable name in the root element (usually the html element) using the -- prefix and assigning a value to it. Then, wherever you need to use the variable, you can use the var() function to reference it.
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
}
In the example above, we define a variable named --main-color and set its value to red. We then reference this variable in the style of the h1 element using var(--main-color) to set the text color of the h1 element to red.
Sample code 1: Declare and use CSS variables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example above, we define a variable named --main-color and set its value to red. We then reference this variable in the h1 element’s style using var(--main-color), thus setting the text color of the h1 element to red.
Local Variables
In addition to defining global variables in the root element, we can also define local variables in any element. Local variables are only valid within the current element and its child elements and do not affect other elements.
.container {
--text-color: #333;
}
p {
color: var(--text-color);
}
In the example above, we define a local variable named --text-color within an element named .container and set its value to gray. We then use var(--text-color) within the p element’s style to reference this local variable, thereby setting the p element’s text color to gray.
Sample code 2: local variables
<!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>
<style>
.container {
--text-color: #333;
}
p { color: var(--text-color);
}
</style>
</head>
<body>
<div class="container">
<p>Welcome to geek-docs.com</p>
</div>
</body>
</html>
Output:
In the example above, we define a local variable named --text-color in an element named .container and set its value to gray. We then use var(--text-color) in the style of the p element to reference this local variable, thereby setting the text color of the p element to gray.
Using CSS Variables to Switch Themes
One important use of CSS variables is to switch themes. By defining variable values for different themes, we can dynamically change the style of the entire page when the user switches themes.
:root {
--main-color: #ff0000;
}
.dark-theme {
--main-color: #0000ff;
}
h1 {
color: var(--main-color);
}
In the example above, we define a global variable named --main-color and set its value to red. Then, when the user switches to the dark theme, we can redefine --main-color in the .dark-theme class to blue, thus changing the page’s theme color.
Sample code 3: theme switching
<!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>
<style>
:root {
--main-color: #ff0000;
}
.dark-theme {
--main-color: #0000ff;
}
h1 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1> <button onclick="toggleTheme()">Toggle Theme</button>
<script>
function toggleTheme() {
document.documentElement.classList.toggle('dark-theme');
}
</script>
</body>
</html>
Output:
In the example above, we define a global variable named --main-color and set its value to red. Then, when the user clicks the button to switch the theme, we dynamically toggle the .dark-theme class via JavaScript, thereby changing the page’s theme color.
Using CSS Variables in Media Queries
CSS variables can also be used in media queries, allowing us to dynamically change styles based on different screen sizes or device types.
:root {
--main-color: #ff0000;
}
@media (max-width: 768px) {
:root {
--main-color: #00ff00;
}
}
h1 {
color: var(--main-color);
}
In the example above, we define a global variable named --main-color and set its value to red. Then, for screen widths less than 768px, we redefine --main-color to green, thus changing the page’s theme color across different screen sizes.
Example Code 4: Using CSS Variables in Media Queries
<!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>
<style>
:root {
--main-color: #ff0000;
}
@media (max-width: 768px) {
:root {
--main-color: #00ff00;
}
}
h1 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example above, we define a global variable named --main-color and set its value to red. Then, for screen widths less than 768px, we redefine --main-color to green, thus changing the page’s theme color across different screen sizes.
Dynamically Modifying CSS Variables with JavaScript
In addition to defining and using CSS variables in stylesheets, we can also use JavaScript to dynamically modify the values of CSS variables, achieving more flexible style control.
<!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>
<style>
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() { document.documentElement.style.setProperty('--main-color', '#00ff00');
}
</script>
</body>
</html>
Output:
In the above example, we use JavaScript to write a changeColor() function. When the user clicks the button, the function dynamically changes the value of the --main-color variable to green, thereby changing the text color of the h1 element.
Sample code 5: Use JavaScript to dynamically modify CSS variables
<!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>
<style>
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.documentElement.style.setProperty('--main-color', '#00ff00');
}
</script>
</body>
</html>
Output:
In the above example, we wrote a changeColor() function in JavaScript. When the user clicks the button, the function dynamically changes the value of the --main-color variable to green, thereby changing the text color of the h1 element.
CSS Variable Inheritance and Overriding
CSS variables can be inherited and overridden, allowing us to flexibly control styles across different elements.
:root {
--main-color: #ff0000;
}
.container {
--main-color: #00ff00;
}
h1 {
color: var(--main-color);
}
p {
color: var(--main-color);
}
In the example above, we define a global variable named --main-color in the root element and set its value to red. Then, in an element named .container, we redefine --main-color to green. Finally, we use var(--main-color) in the styles of the h1 and p elements to reference this variable, making their text colors green and red respectively.
Example Code 6: Inheritance and Overriding of CSS Variables
<!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>
<style>
:root {
--main-color: #ff0000;
}
.container {
--main-color: #00ff00;
}
h1 {
color: var(--main-color);
}
p {
color: var(--main-color);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to geek-docs.com</h1>
<p>This is a paragraph with custom color</p>
</div>
</body>
</html>
Output:
In the example above, we defined a global variable named --main-color in the root element and set its value to red. Then, within an element named .container, we redefine the value of --main-color to green. Finally, we reference this variable using var(--main-color) in the styles of the h1 and p elements, setting their text colors to green and red, respectively.
Using CSS Variables for Dynamic Effects
By combining CSS variables with CSS transitions or animations, we can create dynamic effects such as color gradients and resizing.
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
transition: color 0.5s;
}
h1:hover {
--main-color: #00ff00;
}
In the example above, we define a global variable named --main-color and set its value to red. We then reference this variable in the h1 element’s style using var(--main-color) and add a color transition effect. When the user hovers over the h1 element, we redefine the value of --main-color to green, thus achieving a gradient effect on the text color.
Example Code 7: Using CSS Variables for Dynamic Effects
<!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>
<style>
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
transition: color 0.5s;
}
h1:hover {
--main-color: #00ff00;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example above, we define a global variable called --main-color and set its value to red. We then reference this variable in the h1 element’s style using var(--main-color) and add a color transition effect. When the user hovers over the h1 element, we redefine the value of --main-color to green, creating a gradient effect for the text color.
Using CSS Variables for Responsive Design
CSS variables can also help us achieve responsive design, dynamically adjusting styles based on different screen sizes or device types.
:root {
--font-size: 16px;
}
@media (max-width: 768px) {
:root {
--font-size: 14px;
}
}
h1 {
font-size: var(--font-size);
}
In the example above, we define a global variable called --font-size and set its value to 16px. Then, when the screen width is less than 768px, we redefined the value of --font-size to 14px, thereby adjusting the text size under different screen sizes.
Example Code 8: Using CSS Variables for Responsive Design
<!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>
<style>
:root {
--font-size: 16px;
}
@media (max-width: 768px) {
:root {
--font-size: 14px;
}
}
h1 {
font-size: var(--font-size);
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example above, we define a global variable named --font-size and set its value to 16px. Then, for screen widths less than 768px, we redefine --font-size to 14px, thus adjusting the text size for different screen sizes.
Through the above examples, we can see the power of CSS variables. They not only simplify stylesheet management, but also enable dynamic effects and responsive design, bringing more flexibility and maintainability to web development.