2.1 Declaring CSS Variables
CSS variables, also known as Custom Properties, let you define values that you can reuse across different parts of your CSS code. They make managing styles much easier and more flexible.
CSS variables are declared with a double dash (--) and can be set in any selector. However, to ensure the variables are available throughout the document, they are often defined in the root selector :root.
Syntax:
selector {
--variable-name: value;
}
Example:
This example declares four variables: --main-bg-color, --main-text-color, --primary-color, and --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Using CSS Variables
To use the value of a variable, the var() function is applied, taking the variable name as an argument.
Syntax:
selector {
property: var(--variable-name);
}
Example:
In this example, variable values are used to set the background color, text color, font size, and link color.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Examples of Using CSS Variables
Example 1: Basic Use of Variables
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Result:
- The page background will be light gray
- The text will be dark gray
- The font size will be 16 pixels
- Links will be blue
Example 2: Overriding Variables in Individual Components
CSS variables can be overridden for individual elements or components, providing flexibility in styling:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Overriding a variable */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
Result:
- The header background will be blue, and the text will be light gray
- The footer background will be red (overridden variable), and the text will be light gray
Example 3: Combining Variables with Other Values
CSS variables can be combined with other values and CSS functions:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
Result:
- The container will have padding and margin set by variables
2.3 Using CSS Variables in JavaScript
Example of Using CSS Variables in JavaScript
CSS variables can be dynamically changed using JavaScript, allowing for real-time style adjustments:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Explanation:
When the button is clicked, the values of the variables --bg-color and --text-color change, resulting in the background and text colors changing on the page.
GO TO FULL VERSION