CSS Variables
Working with VariablesIn this lesson, we will learn about CSS variables and how to use it in CSS.
Introduction to CSS Variables
CSS variables, or custom properties, allow you to store and reuse values in your stylesheets. They act like containers for values that you can apply to multiple elements. This helps maintain consistency and makes your code more manageable.
Define Your CSS Variables
To declare a CSS variable, you use the -- prefix followed by a name. For example:
:root {
--bg-color: #F7FFAF;
--main-color: #3838FE;
--text-size: 1.25rem;
}In the example above, we have defined three CSS variables, --bg-color, --main-color and --text-size, within the :root selector.
In CSS, :root is a pseudo-class that represents the highest-level parent element in an HTML document, often referred to as the root element. In most cases, this root element is the <html> element.
CSS variables declared in the :root selector have a global scope. This means they can be accessed and used anywhere in your stylesheet, making it easy to maintain a consistent design by changing values in one place.
Use the CSS Variables
Now that you have defined your variables, you can use them in your CSS properties. For example, to apply the --main-color variable as the text color of an element, you can do the following:
.info {
color: var(--main-color);
}Here, var(--main-color) retrieves the value of the --main-color variable and sets it as the text color for elements with the class "info". Let's see a complete example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Variables Example</title>
<!-- Internal CSS -->
<style>
:root {
--bg-color: #f7ffaf;
--main-color: #3838FE;
--text-size: 1.25rem;
}
div {
width: 300px;
background-color: var(--bg-color);
padding: 10px;
}
.info {
color: var(--main-color);
font-size: var(--text-size);
}
</style>
</head>
<body>
<div>
<p class="info">Use of CSS varaibles</p>
<p class="info">This is a sample paragraph</p>
</div>
</body>
</html>One of the key advantages of CSS variables is that you can easily update them globally. For example, if you want to change the main color throughout your website, you can do it by updating the variable's value in the :root selector:
:root {
--main-color: #ff5733; /* Updated color */
}Now, all elements using var(--main-color) will automatically reflect the new color.
Fallback Values
Fallback values are essential to ensure your styles work gracefully on older browsers that might not support CSS variables.
Consider this scenario: You have defined a CSS variable for the main text color, but you want to ensure that even if CSS variables aren't supported, your website still displays correctly. This is where fallback values come in handy.
Here's how you can set a fallback value for the color property using a CSS variable:
color: var(--main-color, blue);In the example above, var(--main-color, blue) does two things:
1) It tries to get the value of --main-color. If the variable exists, it will use that value.
2) If the variable doesn't exist (perhaps due to browser limitations), it will use the fallback value that is blue.
