HTML Classes and CSS Layout — Episode 09: Practical Guide to Class Selectors and Flexbox (Updated June 2026)

NASSCOM projects a 1.25 million digital skills gap by 2027, and HTML and CSS fundamentals remain the most-tested skills in every junior frontend developer interview in India. This is Episode 09 of ABC Trainings' free HTML series — and today we go deep on CSS class selectors and layout patterns. If you watched the YouTube video, this guide gives you the written version with code examples you can actually copy and practice. Watch the video above first, then work through this guide.

▶ Watch on YouTube

What Are HTML Classes and Why Every Developer Needs Them

HTML classes are how you connect your HTML structure to your CSS styling — and once you understand them properly, the way websites are built suddenly makes sense. Here's the thing: without classes, you'd have to write separate CSS rules for every individual element. A page with 50 buttons would need 50 separate CSS declarations. With classes, you write one rule — .btn { background: #1d3557; color: white; padding: 10px 20px; } — and every element that carries class="btn" gets that styling instantly. Classes also make JavaScript work: document.querySelectorAll('.card') gives you every card element in one command. They're used in frameworks like React, Vue, and Angular everywhere. Learning classes in plain HTML is the foundation that makes all of that click.

Defining and Applying a CSS Class: The Step-by-Step Syntax

The syntax is straightforward but the mental model matters. In your CSS file (or style tag), you define a class by preceding its name with a dot: .highlight { background-color: yellow; font-weight: bold; }. Then in your HTML, you attach it to any element with the class attribute: <p class="highlight">This text is highlighted</p>. The name after the dot in CSS must exactly match the value in the class attribute — case-sensitive. One common mistake: students write class="highlight" in HTML but .Highlight in CSS (capital H) and wonder why it doesn't work. The rule is simple — lowercase everywhere is the convention, and consistency saves debugging time. You can apply the same class to any HTML element — p, div, span, button, h2 — it makes no difference.

Multiple Classes on One Element: The Power Move

What most people don't realise until they see it in action is how powerful it is to stack multiple classes on a single element. <div class="card card-blue shadow-lg"> — that div is now getting styles from three separate CSS rules simultaneously. .card might set padding and border-radius. .card-blue sets the background colour. .shadow-lg adds the box-shadow. Each class adds its own layer of style without touching the others. This is the pattern used in every major CSS framework — Bootstrap, Tailwind CSS, and Bulma all work this way. When you see class="flex justify-center items-center gap-4 p-8 bg-white rounded-xl shadow-md" in a Tailwind project, that's 7 classes all contributing their single focused rule to one element. Understanding that multiple classes stack is what makes utility-first CSS frameworks readable.

CSS Layout with Classes: Flexbox Basics Every Beginner Must Know

Flexbox is where HTML classes become a layout superpower. The key insight: Flexbox is controlled by CSS properties on the parent container, and you apply those properties via classes. Here's the essential pattern. Step 1 — give the parent element a class and set display:flex in CSS: .card-row { display: flex; gap: 20px; }. Step 2 — control alignment: justify-content: center centres children horizontally; align-items: center centres them vertically. Step 3 — control wrapping: flex-wrap: wrap allows cards to drop to the next row on smaller screens. Your three card children just need a .card class with a fixed width and they'll line up automatically. That's the pattern behind almost every multi-column layout you see on modern websites. Flexbox replaced the old float-based hacks that used to require clearing and negative margins — if you ever see tutorials using float: left for layout, they're outdated.

Common Mistakes Beginners Make with HTML Classes

After watching hundreds of students write their first HTML pages, the same mistakes come up every time. Mistake 1: using spaces inside a single class name — class="card blue" is correct (two classes), not a single name with a space. Mistake 2: putting the dot in the HTML attribute — class=".highlight" is wrong; the dot belongs only in the CSS selector. Mistake 3: naming classes after appearance instead of purpose — class="red-text" locks you into the colour; class="error-message" lets you change the colour later without touching HTML. Mistake 4: forgetting to link the CSS file to the HTML — <link rel="stylesheet" href="style.css"> must be in the <head>. Mistake 5: expecting inherited classes — a class on a parent div doesn't automatically give child elements the same class (though CSS cascade does apply inherited properties like font-family).

Practice Project: Build a 3-Card Responsive Layout Using Classes

Here's your Episode 09 practice challenge. Create index.html and style.css. In HTML: build a section with three divs, each carrying class="card". Inside each card: an h3 title and a p description. Wrap all three divs in a div with class="card-row". In CSS: set .card-row to display:flex and gap:24px. Style .card with width:300px, padding:24px, background:#f8fafc, border-radius:12px, box-shadow:0 4px 12px rgba(0,0,0,0.08). Style the h3 inside .card with color:#1d3557. Now add a second class to one card — class="card card-featured" — and give .card-featured a background:#1d3557 and color:white. That's three key concepts in one exercise: classes, Flexbox layout, and stacking multiple classes. Share your result in the YouTube video comments — we review student code every week.

FAQs

What is the difference between an HTML class and an HTML id?

An HTML class can be used on multiple elements on the same page — it's designed for reuse. An id must be unique: only one element per page should have a given id value. In CSS, you select a class with a dot (.card) and an id with a hash (#main-header). Use classes for styling and grouping; use ids for unique page anchors or JavaScript targeting of a single specific element.

Can one HTML element have multiple classes at the same time?

Yes, and this is one of the most useful features of HTML classes. Simply add multiple class names separated by spaces in the class attribute: class="card card-blue shadow-lg". Each class name is independent — the element receives all the CSS rules from each class simultaneously. This is the foundation of utility-first CSS frameworks like Tailwind CSS, where elements commonly carry 8–12 utility classes at once.

How are HTML classes used in CSS to apply styles?

In your CSS file, you define a class using a dot followed by the name: .card { background: white; padding: 20px; border-radius: 8px; }. Then in HTML, any element with class="card" will receive those styles. The CSS selector .card matches all HTML elements that have card in their class attribute, regardless of whether they also have other classes.

Do I need to know JavaScript to use HTML classes?

No — HTML classes work entirely in CSS without any JavaScript. You define the class in your CSS, apply it in your HTML class attribute, and the browser handles the styling automatically. JavaScript can also use classes (to add, remove, or toggle them with classList.add() and classList.toggle()), but that's a separate and optional use case. For layout and styling, CSS alone is enough.