🎨 CSS COURSE – MODULE 13: CSS VARIABLES

📁 File: variables.md

🎨 CSS Variables (Custom Properties)

📌 Introduction

CSS Variables let you store values and reuse them anywhere.

👉 Instead of repeating colors, sizes, or styles 👉 You define them once and reuse them everywhere

🧠 1. Defining Variables

Variables are created inside :root

:root {
  --primary-color: blue;
  --text-size: 16px;
}

✔ -- is required for variables

🎯 2. Using Variables

h1 {
  color: var(--primary-color);
  font-size: var(--text-size);
}

✔ var() is used to access variables

🎨 3. Real Example

<h1>Hello CSS</h1>
<p>Using variables</p>

:root {
  --main-color: #4facfe;
  --font-size: 18px;
}

h1 {
  color: var(--main-color);
  font-size: var(--font-size);
}

p {
  color: var(--main-color);
}

🌗 4. Theme System (VERY IMPORTANT)

Light Theme

:root {
  --bg-color: white;
  --text-color: black;
}

Dark Theme

.dark {
  --bg-color: black;
  --text-color: white;
}

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

✔ This is how dark mode works in real apps

⚙️ 5. Fallback Values

color: var(--main-color, red);

✔ If variable is missing → use red

🧩 6. Why Use Variables?

Without variables:

h1 {
  color: blue;
}
p {
  color: blue;
}
a {
  color: blue;
}

With variables:

:root {
  --primary: blue;
}

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

✔ Easier to maintain ✔ Easy to change design

🧠 7. Scope of Variables

.container {
  --box-color: red;
}

.box {
  color: var(--box-color);
}

✔ Variables can be local or global

⚠️ Common Mistakes

• Forgetting -- ❌
• Not using var() ❌
• Overcomplicating variables ❌
• Not organizing theme variables ❌

🎯 Best Practice

👉 Always define:

colors
spacing
font sizes
theme values

🧪 Mini Exercise

Create:

1. A color variable for primary theme
2. A font-size variable
3. A dark mode theme
4. A card using variables
5. A button using variables