Using variables in CSS - Mini Project: Build & Apply

Using CSS Variables for Theming

📖 Scenario: You are creating a simple webpage that uses colors for background and text. To make it easy to change these colors later, you want to use CSS variables.

🎯 Goal: Build a CSS stylesheet that defines color variables and applies them to the page background and text color.

📋 What You'll Learn

Define CSS variables for background color and text color

Use the CSS variables in the body selector

Ensure the colors are easy to update by changing only the variables

💡 Why This Matters

🌍 Real World

CSS variables are used in real websites to create themes and make styling easier to update without changing many lines of code.

💼 Career

Knowing CSS variables is important for front-end developers to write clean, maintainable, and scalable stylesheets.

1

Create CSS variables for colors

Create CSS variables called --bg-color and --text-color inside the :root selector. Set --bg-color to #f0f0f0 and --text-color to #333333.

CSS

:root {
  /* Define CSS variables here */
  /* Your code here */
}

Need a hint?

Use the :root selector to define global CSS variables with --variable-name: value;.

2

Add body selector to use variables

Add a body selector and set its background-color to the CSS variable --bg-color and color to the CSS variable --text-color using the var() function.

CSS

:root {
  --bg-color: #f0f0f0;
  --text-color: #333333;
}

body {
  /* Use CSS variables for colors here */
  /* Your code here */
}

Need a hint?

Use var(--variable-name) to access CSS variables inside property values.

3

Add a heading style using variables

Add a h1 selector and set its color to the CSS variable --text-color.

CSS

:root {
  --bg-color: #f0f0f0;
  --text-color: #333333;
}

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

h1 {
  /* Set heading color using variable */
  /* Your code here */
}

Need a hint?

Use the same var(--text-color) to keep heading color consistent.

4

Update variables for a dark theme

Change the CSS variables inside :root to create a dark theme by setting --bg-color to #222222 and --text-color to #eeeeee.

CSS

:root {
  --bg-color: #f0f0f0;
  --text-color: #333333;
}

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

h1 {
  color: var(--text-color);
}

/* Update variables for dark theme here */
/* Your code here */

Need a hint?

Change the variable values inside :root to update the theme colors easily.