CSS — Lesson 12
CSS Variables
Using custom properties for reusable values.
CSS Variables
CSS Custom Properties (variables) let you store and reuse values throughout your stylesheet.
Defining Variables
:root {
--primary: #333;
--spacing: 16px;
--font: "Inter", sans-serif;
}
Using Variables
.button {
background: var(--primary);
padding: var(--spacing);
font-family: var(--font);
}
Fallback Values
.card {
color: var(--text-color, #333);
font-size: var(--size, 16px);
}
Scoped Variables
.theme-dark {
--bg: #1a1a1a;
--text: #fff;
}
.theme-light {
--bg: #fff;
--text: #333;
}
Tip: Use CSS variables for theming, consistent spacing, and colors. They make maintaining and updating design systems much easier.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →