Declaring variables in CSS - Mini Project: Build & Apply

Declaring CSS Variables for Theming

📖 Scenario: You are creating a simple webpage theme using CSS variables. CSS variables help you keep colors and fonts consistent and easy to change.

🎯 Goal: Declare CSS variables for primary color, secondary color, and base font size. Use these variables in the CSS to style a heading and a paragraph.

📋 What You'll Learn

Declare CSS variables inside the :root selector

Create variables named --primary-color, --secondary-color, and --base-font-size

Use the variables to style the h1 color, p color, and font size

Ensure the CSS is valid and applies correctly to the HTML

💡 Why This Matters

🌍 Real World

CSS variables are used in real websites to create themes and make design changes easy and consistent.

💼 Career

Knowing how to declare and use CSS variables is important for front-end developers to build maintainable and scalable stylesheets.

1

Create the CSS root selector

Write a CSS rule for the :root selector to start declaring variables.

CSS

:root {
  /* Your CSS variables will go here */
}

Need a hint?

The :root selector targets the whole document for global CSS variables.

2

Declare CSS variables inside :root

Inside the :root selector, declare these CSS variables exactly: --primary-color with value #3498db, --secondary-color with value #2ecc71, and --base-font-size with value 1.2rem.

CSS

:root {
  /* Declare --primary-color, --secondary-color, and --base-font-size here */
}

Need a hint?

CSS variables start with two dashes -- and are declared with a colon and value.

3

Use CSS variables to style heading and paragraph

Write CSS rules for h1 and p elements. Set h1 color to var(--primary-color), p color to var(--secondary-color), and p font size to var(--base-font-size).

CSS

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

/* Style h1 and p using the CSS variables */

Need a hint?

Use var(--variable-name) to access CSS variables inside other CSS rules.

4

Complete the CSS with a body background color

Add a CSS rule for the body element that sets its background color to var(--secondary-color).

CSS

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

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

p {
  color: var(--secondary-color);
  font-size: var(--base-font-size);
}

/* Add body background color here */

Need a hint?

Use the body selector to set the page background color using the CSS variable.