Hackforge Academy

Explanation

CSS variables can be overridden inside specific elements to create component-level styling.

Code:

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

.card {
  --text-color: darkblue;
  color: var(--text-color);
}

Explanation

Provide a fallback value if the variable is not defined.

Code:

.title {
  color: var(--heading-color, green);
}

Explanation

CSS variables are useful for themes such as light and dark mode.

Code:

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

.dark-theme {
  --bg-color: #222;
}

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