CSS Variables, also known as Custom Properties, allow you to store values that you can reuse throughout your CSS. This makes your CSS more maintainable and easier to read. In this section, we will cover the basics of CSS Variables, how to define and use them, and some practical examples.
What are CSS Variables?
CSS Variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are particularly useful for themes, design systems, and large projects where consistency and maintainability are crucial.
Key Concepts
- Declaration: CSS Variables are declared within a CSS rule that defines their scope.
- Usage: CSS Variables are used by referencing their name within the
var()function. - Scope: CSS Variables can be scoped globally or locally.
Syntax
Declaring CSS Variables
CSS Variables are declared using the -- prefix followed by the variable name. They are typically defined within the :root selector for global scope.
Using CSS Variables
CSS Variables are used by referencing their name within the var() function.
body {
color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
}Example
<!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 {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
}
</style>
</head>
<body>
<h1>Welcome to CSS Variables</h1>
<p>This is an example of using CSS Variables.</p>
</body>
</html>Practical Examples
Theming with CSS Variables
CSS Variables are particularly useful for creating themes. You can easily switch themes by changing the values of the variables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theming with CSS Variables</title>
<style>
:root {
--background-color: #ffffff;
--text-color: #000000;
}
.dark-theme {
--background-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<h1>Theming with CSS Variables</h1>
<p>This is an example of theming using CSS Variables.</p>
<script>
function toggleTheme() {
document.body.classList.toggle('dark-theme');
}
</script>
</body>
</html>Responsive Design with CSS Variables
CSS Variables can also be used to create responsive designs by adjusting variable values based on media queries.
:root {
--font-size: 16px;
}
@media (min-width: 600px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 900px) {
:root {
--font-size: 20px;
}
}
body {
font-size: var(--font-size);
}Exercises
Exercise 1: Basic Usage
- Define a CSS Variable for a primary color.
- Use this variable to set the background color of a
div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 1</title>
<style>
:root {
--primary-color: #ff6347;
}
.box {
background-color: var(--primary-color);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Exercise 2: Theming
- Create a light and dark theme using CSS Variables.
- Add a button to toggle between the themes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 2</title>
<style>
:root {
--background-color: #ffffff;
--text-color: #000000;
}
.dark-theme {
--background-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<h1>Theming with CSS Variables</h1>
<p>This is an example of theming using CSS Variables.</p>
<script>
function toggleTheme() {
document.body.classList.toggle('dark-theme');
}
</script>
</body>
</html>Common Mistakes and Tips
- Forgetting the
--Prefix: Always remember to prefix your variable names with--. - Scope Issues: Ensure that your variables are declared in the correct scope. Use
:rootfor global variables. - Fallback Values: Use fallback values in the
var()function to handle cases where the variable might not be defined.
Conclusion
CSS Variables are a powerful feature that can greatly enhance the maintainability and flexibility of your CSS. By understanding how to declare and use them, you can create more dynamic and adaptable stylesheets. In the next section, we will explore CSS Functions, which will further expand your CSS capabilities.
CSS Mastery: From Beginner to Advanced
Module 1: Introduction to CSS
- What is CSS?
- CSS Syntax and Selectors
- How to Add CSS to HTML
- Basic CSS Properties
- CSS Colors
- CSS Units and Measurements
Module 2: Text and Font Styling
- Text Properties
- Font Properties
- Google Fonts Integration
- Text Alignment and Spacing
- Text Decoration and Transformation
Module 3: Box Model and Layout
- Understanding the Box Model
- Margin and Padding
- Border and Outline
- Width and Height
- Box Sizing
- CSS Display Property
Module 4: Positioning and Floating
- CSS Position Property
- Static, Relative, Absolute, and Fixed Positioning
- CSS Float and Clear
- Creating Layouts with Float
- CSS Z-Index
Module 5: Flexbox
- Introduction to Flexbox
- Flex Container Properties
- Flex Item Properties
- Creating Layouts with Flexbox
- Responsive Design with Flexbox
Module 6: CSS Grid
- Introduction to CSS Grid
- Grid Container Properties
- Grid Item Properties
- Creating Layouts with CSS Grid
- Responsive Design with CSS Grid
Module 7: Advanced CSS Techniques
Module 8: Responsive Design
- Introduction to Responsive Design
- Media Queries
- Responsive Typography
- Responsive Images
- Mobile-First Design
Module 9: Preprocessors and Frameworks
- Introduction to CSS Preprocessors
- Sass Basics
- Less Basics
- Introduction to CSS Frameworks
- Using Bootstrap