Let’s begin with Lecture 27 of the HTML5 & CSS3 series. CSS Variables (Custom Properties) – Reusable Styles Made Easy. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what CSS variables are and why they’re useful
- Know how to define and use custom properties with
--variable-name - Be able to change theme colors or fonts across your whole site with one edit
- Create a simple theme switcher using variables
- Make your CSS more organized, readable, and maintainable!
💡 What Are CSS Variables?
CSS Variables, also known as custom properties, let you store reusable values like colors, font sizes, spacing, or any CSS value — and reuse them across your entire website.
Think of it like this:
If your website is a coloring book, then CSS variables are your color palette — change one color in the palette, and it updates everywhere that color is used!
🔤 Basic Syntax
Define a Variable:
:root {
--main-color: #3498db;
--font-size: 16px;
}You usually define variables inside :root so they’re globally available.
Use a Variable:
h1 {
color: var(--main-color);
}
p {
font-size: var(--font-size);
}You can even use variables inside other variables:
:root {
--main-bg: #f4f4f4;
--card-bg: var(--main-bg);
}🛠 Benefits of Using CSS Variables
| Reusability | Define once, use anywhere |
| Maintainability | Change one variable to update many styles |
| Consistency | Keep colors, fonts, spacing consistent |
| Dynamic Updates | Change variables with JavaScript for themes or dark mode |
💻 Try This: Build a Themed Card Layout Using Variables
Let’s update your card layout from earlier lectures to use CSS variables for colors and spacing.
Step 1: Open flex-card-layout.html or grid-gallery.html
Or create a new file named:
themed-cards.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Theme Example</title>
<style>
:root {
/* Color Theme */
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #f4f4f4;
--card-background: white;
--text-color: #333;
/* Spacing */
--spacing-sm: 10px;
--spacing-md: 20px;
--spacing-lg: 40px;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: var(--background-color);
padding: var(--spacing-lg);
}
h1 {
text-align: center;
color: var(--primary-color);
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
}
.card {
flex: 1 1 calc(33% - var(--spacing-md));
background-color: var(--card-background);
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: var(--spacing-md);
box-sizing: border-box;
}
.card h3 {
color: var(--secondary-color);
margin-top: 0;
}
.card p {
color: var(--text-color);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - var(--spacing-md));
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<h1>Themed Cards with CSS Variables</h1>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This card uses CSS variables for styling.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>You can easily change the theme by editing just a few variables!</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>Try changing the primary color in the CSS and see everything update automatically.</p>
</div>
</div>
<p style="text-align: center; margin-top: 30px;"><a href="index.html">Back to Home</a></p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a themed card layout using CSS variables — now changing the look of your site takes just a few edits!
💡 Bonus: Switch Themes Dynamically with JavaScript (Optional)
Want to make your site support light/dark mode or color themes?
Add this small script to toggle between light and dark themes:
Add to <head>:
<style>
[data-theme="dark"] {
--primary-color: #2980b9;
--background-color: #222;
--card-background: #333;
--text-color: #eee;
}
</style>Add Button and Script to <body>:
<button onclick="document.body.setAttribute('data-theme', 'dark')">Switch to Dark Mode</button>
<button onclick="document.body.removeAttribute('data-theme')">Switch to Light Mode</button>Now users can switch themes instantly! 🌙💡
🧪 Try It Yourself!
- Define a new variable like
--border-radiusand apply it to cards and buttons. - Create a second theme using
data-theme="green"and assign different colors. - Use variables for font families too, like
--main-fontand--heading-font. - Replace all hard-coded pixel values with spacing variables (
--spacing-sm, etc.)
🚀 Next Lecture Preview:
In Lecture 28, we’ll explore pseudo-classes and pseudo-elements like :hover, ::before, and ::after — powerful tools to style elements based on their state or add decorative content without extra HTML!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
