Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Use -- prefix in :root
:root {
--primary-color: #667eea;
--spacing: 20px;
}Use var() function
.button {
background: var(--primary-color);
padding: var(--spacing);
}:root {
--primary: #667eea;
--secondary: #764ba2;
--text: #333;
--spacing: 1rem;
}
.card {
background: var(--primary);
color: var(--text);
padding: var(--spacing);
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎨 CSS Variables Demo</h1>
<div class="controls">
<div class="control-group">
<label>Primary:</label>
<input type="color" value="#667eea"
onchange="updateColor('--primary-color', this.value)">
</div>
<div class="control-group">
<label>Secondary:</label>
<input type="color" value="#764ba2"
onchange="updateColor('--secondary-color', this.value)">
</div>
</div>
<div class="demo-box">
I use CSS Variables!
</div>
<p style="text-align: center; margin-top: 20px; font-size: 14px; color: #666;">
Try changing the colors above ⬆️
</p>
</div>
</body>
</html>Loading preview...
The var() function accepts a second parameter as a fallback value if the variable doesn't exist.
/* If --primary doesn't exist, use blue */
color: var(--primary, blue);
/* Nested fallbacks */
color: var(--primary, var(--fallback, #000));--primary: #667eea;
--success: #10b981;
--danger: #ef4444;--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;--font-size-sm: 14px;
--font-size-md: 16px;
--line-height: 1.6;--bg: white;
--text: #333;
[dark] { --bg: #111; --text: #fff; }