Chapter 23 | Reusable Styling

CSS Variables & Modern CSS

CSS variables help you manage colors, spacing, radius and design values from one place. In this chapter, you will learn reusable CSS and modern functions like calc() and clamp().

Start Learning Try Variables

Custom Properties

Store reusable values like colors and spacing.

:root

Defines global variables for the whole website.

var()

Uses the value stored inside a variable.

calc() & clamp()

Modern functions for flexible sizing.

Learning Objectives

After This Chapter, You Will Understand

This chapter helps you write cleaner, scalable and professional CSS.

Variables

Create reusable CSS custom properties.

:root

Store global design values in one place.

Theme System

Build reusable colors, spacing and radius.

Modern Functions

Use calc(), min(), max() and clamp().

CSS Variables

What are CSS Variables?

CSS variables are reusable values stored with custom property names.

1 Simple Meaning

CSS variables allow you to store a value once and reuse it many times. For example, if your brand color is used in 50 places, you can store it in one variable and use it everywhere.

Definition: CSS variables, also called custom properties, are reusable values declared with double hyphen names such as --primary-color.

Professional Tip: Variables make large websites easier to maintain and redesign.

2 Basic Syntax

:root {
    --primary-color: #06285f;
    --accent-color: #d6a549;
}

.button {
    background: var(--primary-color);
}

Custom property names start with --. The var() function uses the stored value.

:root Selector

Global Variables with :root

The :root selector is commonly used to store global design tokens.

3 Why Use :root?

Variables declared in :root are available throughout the webpage. This makes it perfect for brand colors, font sizes, spacing, border radius and shadows.

:root {
  --navy: #06285f;
  --gold: #d6a549;
  --radius: 22px;
  --space: 24px;
}

Theme-Based Card

This card uses custom properties for color, spacing and radius.

Reusable Button

--navy

#06285f

--gold

#d6a549

--teal

#00a7b5

--soft

#eef7ff

Theme System

Build a Reusable CSS Theme

A theme system keeps your website design consistent and easy to update.

Variable Type	Example	Use
Brand Color	--primary: #06285f;	Header, buttons, headings
Accent Color	--accent: #d6a549;	Highlights, badges, icons
Spacing	--space-md: 24px;	Padding and gaps
Radius	--radius-lg: 22px;	Cards, buttons, panels
Shadow	--shadow: 0 10px 30px rgba(...);	Cards and floating boxes

4 Reusable Card

.card {
  background: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

5 Fallback Value

var() can include a fallback value if the variable is missing.

.box {
color: var(--text-color, #334155);
}

Modern CSS

calc(), clamp(), min() and max()

Modern CSS functions help create flexible and smarter layouts.

calc()

Performs CSS calculations.

.box {
width: calc(100% - 40px);
}

clamp()

Sets minimum, flexible and maximum value.

h1 {
font-size: clamp(28px, 5vw, 54px);
}

min() and max()

Choose minimum or maximum from values.

.container {
width: min(90%, 1100px);
}

This heading uses clamp()

The title size adjusts with the screen but stays within a safe minimum and maximum range.

This box uses calc(100% - 40px)

Practice Task: Create a heading with clamp(), a container with min(), and a card width with calc().

Try It Yourself

Practice CSS Variables

Edit variable values in :root and see the full design change.

HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Variables Practice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

*{
            box-sizing:border-box;
        }

body{
            font-family:Arial;
            margin:0;
            background:var(--soft);
            color:var(--text);
        }

.container{
            width:min(90%, 1050px);
            margin:auto;
            padding:40px 0;
        }

.hero{
            background:linear-gradient(135deg,var(--primary),#0d6efd);
            color:var(--white);
            padding:var(--space);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }

.hero h1{
            font-size:clamp(32px, 6vw, 58px);
            margin-bottom:10px;
        }

.cards{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:18px;
            margin-top:24px;
        }

.card{
            background:var(--white);
            padding:var(--space);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            border-top:5px solid var(--accent);
        }

.btn{
            display:inline-block;
            background:var(--accent);
            color:var(--primary);
            padding:12px 18px;
            border-radius:999px;
            text-decoration:none;
            font-weight:bold;
            margin-top:12px;
        }
    </style>
</head>
<body>

<div class="container">
        <section class="hero">
            <h1>Modern CSS Variables</h1>
            <p>Change variables once and update the full design instantly.</p>
            <a href="#" class="btn">Start Practice</a>
        </section>

<section class="cards">
            <div class="card">
                <h2>Reusable Colors</h2>
                <p>Colors come from variables.</p>
            </div>

<div class="card">
                <h2>Reusable Spacing</h2>
                <p>Padding uses one spacing token.</p>
            </div>

<div class="card">
                <h2>Modern Sizing</h2>
                <p>clamp(), min() and grid make layout flexible.</p>
            </div>
        </section>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Change --primary, --accent, --radius and --space values and observe how the full design updates.

Common Mistakes

Mistakes Students Should Avoid

CSS variables are simple, but naming and structure should be clean.

Wrong Habits

Forgetting double hyphen in variable names
Using var() without correct variable name
Creating too many random variables
Using unclear names like --color1, --x, --abc
Repeating values instead of using variables

Correct Habits

Use clear names like --primary, --accent
Declare global values in :root
Use variables for colors, spacing and radius
Use fallback values when needed
Keep theme values consistent

Remember: CSS variables are most powerful when your design system is planned properly.

Quick Revision

Remember These Points

Revise these before moving to Chapter 24.

CSS Variables

Reusable values declared with double hyphen names.

:root

Common place to declare global variables.

var()

Used to access a CSS variable value.

Theme System

Variables help manage brand colors, spacing and radius.

calc()

Performs CSS calculations.

clamp()

Creates flexible values with minimum and maximum limits.

Protected Learning Content

CSS Variables & Modern CSS

Custom Properties

:root

var()

calc() & clamp()

After This Chapter, You Will Understand

Variables

:root

Theme System

Modern Functions

What are CSS Variables?

1 Simple Meaning

2 Basic Syntax

Global Variables with :root

3 Why Use :root?

Theme-Based Card

Build a Reusable CSS Theme

4 Reusable Card

5 Fallback Value

calc(), clamp(), min() and max()

calc()

clamp()

min() and max()

This heading uses clamp()

Practice CSS Variables

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. CSS variable names start with:

2. Which function is used to access a CSS variable?

3. Where are global CSS variables commonly declared?

4. Which CSS function performs calculations?

5. Which function is useful for responsive font sizes?

Remember These Points

CSS Variables

:root

var()

Theme System

calc()

clamp()