CSS Variables - johnverz22/webdev1-lessons GitHub Wiki

What Are CSS Variables?

Imagine CSS variables like magical containers that can store colors, sizes, or any CSS value. Instead of writing the same color or number over and over, you can create a variable and use it everywhere!

Getting Started

1. Creating Your First Variable

:root {
  --my-favorite-color: purple;
}

.button {
  background-color: var(--my-favorite-color);
}

💡 Think of :root like the "home base" for your variables. It's where you keep variables that can be used anywhere in your CSS.

2. Why Use Variables?

Before Variables

.button {
  background-color: purple;
}

.sidebar {
  border: 2px solid purple;
}

.heading {
  color: purple;
}

With Variables

:root {
  --brand-color: purple;
}

.button {
  background-color: var(--brand-color);
}

.sidebar {
  border: 2px solid var(--brand-color);
}

.heading {
  color: var(--brand-color);
}

Different Types of Variables

Color Variables

:root {
  --primary-color: #3498db;     /* Blue */
  --success-color: #2ecc71;     /* Green */
  --warning-color: #f39c12;     /* Orange */
}

.success-message {
  color: var(--success-color);
}

Size Variables

:root {
  --main-padding: 20px;
  --border-radius: 8px;
}

.card {
  padding: var(--main-padding);
  border-radius: var(--border-radius);
}

Cool Tricks with Variables

Responsive Design

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

/* Smaller screens */
@media (max-width: 600px) {
  :root {
    --base-font-size: 14px;
  }
}

body {
  font-size: var(--base-font-size);
}

Fallback Values

.button {
  /* If --custom-color isn't set, use blue */
  background-color: var(--custom-color, blue);
}

Theme Switcher Example

/* Default Theme */
:root {
  --bg-color: white;
  --text-color: black;
}

/* Dark Theme */
.dark-mode {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Practical JavaScript Interaction

// Change theme with a button
document.querySelector('.theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

Common Mistakes to Avoid

  1. Always Use var() ❌ color: --my-color; ✅ color: var(--my-color);

  2. Check Browser Support

    • Works in all modern browsers
    • Does NOT work in Internet Explorer

Learning Checklist

  • Understand what CSS variables are
  • Create variables using :root
  • Use var() to apply variables
  • Create color and size variables
  • Use variables for responsive design
  • Add fallback values

Practice Challenges

  1. Create a color palette for your personal website
  2. Make a responsive typography system
  3. Build a simple theme switcher

🚀 Next Steps

  • Experiment with variables in your projects
  • Try combining variables with media queries
  • Learn advanced techniques

Resources for Learning

💡 Pro Tip

Variables make your CSS more:

  • Consistent
  • Easier to maintain
  • Flexible
  • Fun to write!