Why CSS variables are used - See It in Action

Why CSS variables are used

📖 Scenario: You are creating a simple webpage with consistent colors and fonts. You want to easily change these styles later without editing many places in your CSS.

🎯 Goal: Build a CSS file that uses CSS variables to store colors and font sizes. Then apply these variables to style the page. This will show how CSS variables help keep styles consistent and easy to update.

📋 What You'll Learn

Create CSS variables for primary color, secondary color, and base font size

Use the CSS variables to style the background color and text color of the page

Use the CSS variable for font size on the body text

Show how changing one variable updates all related styles

💡 Why This Matters

🌍 Real World

Web designers use CSS variables to keep their color schemes and fonts consistent and easy to update across large websites.

💼 Career

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

1

Create CSS variables for colors and font size

Write CSS code to create three CSS variables inside the :root selector: --primary-color with value #3498db, --secondary-color with value #2ecc71, and --base-font-size with value 1.2rem.

CSS

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

Need a hint?

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

2

Apply CSS variables to style the body

Add CSS code to style the body element using the CSS variables: set background-color to var(--primary-color), color to var(--secondary-color), and font-size to var(--base-font-size).

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 1.2rem;
}

body {
  /* Use CSS variables here */
}

Need a hint?

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

3

Add a button styled with CSS variables

Add CSS code to style a button element with background-color set to var(--secondary-color), color set to white, and font-size set to var(--base-font-size).

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 1.2rem;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--base-font-size);
}

button {
  /* Style button using CSS variables */
}

Need a hint?

Use the CSS variables to keep button colors consistent with the page style.

4

Change a CSS variable to update all styles

Modify the --primary-color variable in the :root selector to #e74c3c. This change should update the background color of the body automatically.

CSS

:root {
  /* Change primary color here */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 1.2rem;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--base-font-size);
}

button {
  background-color: var(--secondary-color);
  color: white;
  font-size: var(--base-font-size);
}

Need a hint?

Changing the variable value in :root updates all places where it is used.