CSS Variables - Custom Properties Demo

1. 🎨 Color Variables

--color-primary
#4a90e2

--color-secondary
#e94560

--color-success
#2ecc71

--color-warning
#f39c12

--color-dark
#1a1a2e

/* Define variables at :root (global scope) */
:root {
    --color-primary: #4a90e2;
    --color-secondary: #e94560;
    --color-success: #2ecc71;
    --color-warning: #f39c12;
    --color-dark: #1a1a2e;
}

/* Use variables with var() */
.button {
    background-color: var(--color-primary);
}

2. 🔘 Buttons with Variables

.btn {
    padding: var(--spacing-small) var(--spacing-large);
    border-radius: var(--radius-medium);
    transition: all var(--transition-normal);
}

3. 📇 Cards with Variables

Card Title

This card uses CSS variables for colors, spacing, border-radius, and shadows.

Another Card

Change one variable and all cards update automatically.

Third Card

Perfect for consistent design systems.

.card {
    background-color: white;
    border-radius: var(--radius-large);
    padding: var(--spacing-large);
    box-shadow: var(--shadow-small);
    transition: all var(--transition-normal);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

4. 🌓 Theme Switching (Dark Mode)

Theme Demo Card

Click the dark theme button above. All variables change automatically!

--color-primary changes from blue to pink.
--color-light changes from light to dark.

/* Dark theme overrides */
.dark-theme {
    --color-primary: #e94560;
    --color-secondary: #4a90e2;
    --color-light: #1a1a2e;
    --color-dark: #f5f5f5;
    --color-text: #eee;
}

5. 📏 Spacing Variables

padding: var(--spacing-small)
margin: var(--spacing-small)

padding: var(--spacing-medium)
margin: var(--spacing-medium)

padding: var(--spacing-large)
margin: var(--spacing-large)

:root {
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --spacing-xl: 32px;
}

6. 🔘 Border Radius Variables

small

medium

large

circle

:root {
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-circle: 50%;
}

7. 🌑 Shadow Variables

Small Shadow

Medium Shadow

Large Shadow

:root {
    --shadow-small: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-large: 0 8px 16px rgba(0,0,0,0.1);
}

8. 📱 Responsive Variables

This box changes spacing and font size on mobile

Resize your browser to under 768px to see the change!

/* Change variables on smaller screens */
@media (max-width: 768px) {
    :root {
        --spacing-large: 16px;
        --font-large: 18px;
    }
}

📚 CSS Variables Quick Reference

/* =================================== DEFINING VARIABLES =================================== */ :root { /* Global scope (entire page) */
    --variable-name: value;
}

element { /* Local scope (element only) */
    --local-variable: value;
}

/* =================================== USING VARIABLES =================================== */ element {
    property: var(--variable-name);
    property: var(--variable-name, fallback-value);
}

/* =================================== COMMON VARIABLE NAMES =================================== */ --color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
--color-warning: #ffc107;
--color-info: #17a2b8;
--color-light: #f8f9fa;
--color-dark: #343a40;
--spacing-unit: 8px;
--border-radius: 4px;
--transition-speed: 0.3s;
--font-family-base: 'Inter', sans-serif;
/* =================================== BENEFITS OF CSS VARIABLES =================================== */ 1. Maintainability - Change one value, update everywhere
2. Theming - Easily switch between light/dark mode
3. Consistency - Use same values across entire site
4. Dynamic - Can be changed with JavaScript
5. Responsive - Change values at different breakpoints

🧠 Quick Quiz

/* Question 1: How do you define a CSS variable? */ /* Answer: --variable-name: value; */ /* Question 2: How do you use a CSS variable? */ /* Answer: property: var(--variable-name); */ /* Question 3: Where do you define global variables? */ /* Answer: :root { } */ /* Question 4: What happens when a variable is not defined? */ /* Answer: The property is ignored (unless you provide a fallback) */ /* Question 5: Can CSS variables be changed with JavaScript? */ /* Answer: Yes! document.body.style.setProperty('--color-primary', 'red'); */