Table of Contents

4 Minutes Read

🌟 Lesson: Using CSS Classes to Clean Up Your Code

🧠 Why CSS Classes?

You might have noticed that adding many CSS properties directly to your HTML tags makes your code long, messy, and repetitive. For example:

This kind of code becomes a pain when used repeatedly. A better way is to define these styles once and reuse them using CSS classes. Let’s learn how.

📦 What Is a CSS Class?

A CSS class is a named collection of styles that you define once and apply to any HTML element using the class attribute.

Think of it like a style kit: you build it once and reuse it across multiple elements.

🧩 Basic Structure of a CSS Class

To write a CSS class, we use the <style> tag inside the <head> section of our HTML.

🔍 Breakdown of Code

<style> Tag — Tells the browser that the following code is CSS.
.text — The class name. It must begin with a dot (.).
— Curly braces contain the style rules.
property: value; — Each style rule has a property (e.g., font-size) and a value (e.g., 20px), separated by a colon and ended with a semicolon.

🖼️ Using CSS Classes in HTML

After defining your class in the <head>, use it in the <body> like this:

This helps you apply consistent styling across your page without rewriting CSS repeatedly.

📚 Best Practices

✅ Use descriptive class names (e.g., .main-header, .error-message)
✅ Keep your styles in the <style> tag or better yet, a separate .css file
❌ Avoid inline styles unless necessary

📝 Assignment

Create a webpage with the following:

A CSS class named .highlight that:
- Changes text color to white
- Sets background color to blue
- Adds padding of 10px
Use this class in:
- One <div>
- One <p>

✅ Assignment Answer Key

🌐 Want to Learn More?

Check out:

🚀 Why CSS Classes Matter & Where to Go Next

Learning to use CSS classes is a game-changer in your journey as a web developer. Instead of repeating yourself over and over, you now have a smarter way to keep your code clean, organized, and easy to update.

Think of CSS classes like having your own set of tools. Once you build a style you like, you can reuse it anytime, anywhere — just by calling its name. That’s not just convenient — it’s professional.

This is how real-world websites are built: reusable components, scalable design, and efficient code. You’ve just taken your first real step into that world.

🧭 Where to Go Next?

Ready to level up your skills? Here’s what you can explore next:

External Stylesheets: Learn how to move your CSS into a separate .css file for even cleaner structure.
Multiple Classes on One Element: Did you know you can combine CSS classes?
CSS Layouts (Flexbox & Grid): Take control of how your content is arranged on the page.
Responsive Design: Make your pages look great on mobile, tablet, and desktop.
JavaScript + CSS: Add interactivity by dynamically changing classes with JavaScript.

Using CSS classes