1. Introduction

In this tutorial, we will learn how to create reusable styles using CSS variables. CSS variables, also known as Custom Properties, allow you to store specific values for reuse throughout your CSS stylesheets. This makes your code more efficient and easier to maintain.

By the end of this tutorial, you will be able to:
- Understand the concept of CSS variables
- Create, declare, and use CSS variables
- Apply the same style to multiple elements using CSS variables

Prerequisites: You should have a basic understanding of HTML and CSS.

2. Step-by-Step Guide

2.1 Understanding CSS Variables

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;).

2.2 Declaring CSS Variables

CSS variables are declared inside a CSS selector. Here’s an example:

:root {
  --primary-color: #42a5f5;
}

The :root selector in the example above is a global scope in CSS. It means the variables declared inside the :root selector are available for all elements on the page.

2.3 Using CSS Variables

After declaring a CSS variable, you can use it as the value of another CSS property. The var() function is used to insert the value of a CSS variable:

body {
  background-color: var(--primary-color);
}

3. Code Examples

3.1 Example 1: Basic CSS Variables

This example demonstrates how to create and use a simple CSS variable.

:root {
  --main-font: Arial, sans-serif;
}

body {
  font-family: var(--main-font);
}

In this code snippet, we define a variable --main-font and assign it a value Arial, sans-serif. We then use the var() function to apply this font to the entire body of our HTML document.

3.2 Example 2: Using CSS Variables in Multiple Elements

This example demonstrates how to apply the same style to multiple elements using CSS variables.

:root {
  --primary-color: #42a5f5;
}

.header, .footer {
  background-color: var(--primary-color);
}

Here, we define a variable --primary-color and use it as the background color for both the header and footer of our page. If we want to change the color, we only need to update the variable.

4. Summary

Congratulations! You've learned how to create, declare, and use CSS variables to create reusable styles. This will make your code cleaner and more efficient.

Next steps: Try to use CSS variables in your projects. Experiment with different types of properties and see how you can optimize your code with variables.

Additional resources:
- MDN Web Docs: Using CSS variables
- CSS-Tricks: CSS Custom Properties (Variables)

5. Practice Exercises

5.1 Exercise 1: Basic CSS Variables

Create a CSS variable for the font size and apply it to all paragraphs in your HTML document.

Solution:

:root {
  --main-font-size: 16px;
}

p {
  font-size: var(--main-font-size);
}

This code creates a variable --main-font-size and applies it to all paragraphs.

5.2 Exercise 2: Using CSS Variables in Multiple Elements

Create a CSS variable for a color and use it as the text color for headings (h1, h2) and links (a).

Solution:

:root {
  --primary-color: #333;
}

h1, h2, a {
  color: var(--primary-color);
}

This code creates a variable --primary-color and uses it as the color for h1, h2, and a elements.

For further practice, try to create more variables for different properties and use them in your stylesheets.