HTML Classes and Layout — Episode 08: Understanding the Class Attribute for Smarter CSS Styling (Updated June 2026)

NASSCOM projects a 1.25 million digital skills gap by 2027, and the single most-tested HTML/CSS concept in every junior frontend developer interview in India is the class attribute. Episode 08 of ABC Trainings' free HTML series covers exactly this: what the class attribute does, how to write it correctly, how CSS uses class selectors, and why understanding this concept unlocks everything from Flexbox to Bootstrap to Tailwind CSS. Watch the video above first, then use this written companion to reinforce the concepts with examples you can actually type and test.

▶ Watch on YouTube

What the HTML Class Attribute Actually Does (No Jargon)

Think of the HTML class attribute as a label you stick on elements. Once you've labelled a group of elements with the same class, you can address all of them at once from CSS — changing their colour, padding, font, or layout in one rule. Without classes, CSS has to target elements by their tag name (p, div, h2) which means every paragraph on the page gets the same style, or you end up writing hundreds of inline style attributes. Classes give you the middle ground: you can target specific groups while keeping your HTML clean and your CSS reusable. Here's a concrete analogy I use in class: imagine your HTML is a classroom of students, and the class attribute is the colour of their name tag. You can tell "all students with red tags, stand up" — that's CSS targeting a class. Without name tags, you'd have to call each student by seat number (that's what inline styles are like).

Writing Your First CSS Class: Syntax, Structure, and Naming Rules

The syntax has two parts — the CSS rule and the HTML attribute — and they must match exactly. In CSS: .highlight { background-color: yellow; font-weight: bold; } — the dot is mandatory and signals to the CSS parser that this is a class selector, not a tag or id selector. In HTML: <p class="highlight">This is important</p> — the class attribute value is the class name without the dot. Common mistakes I see every week: putting the dot inside the HTML attribute (class=".highlight" is wrong), using capital letters inconsistently (class="Highlight" in HTML won't match .highlight in CSS), and forgetting to link the CSS file with <link rel="stylesheet" href="style.css"> in the head section. Class names should be lowercase, use hyphens for multiple words (card-title, not cardTitle or CardTitle), and should describe the element's role or purpose — not its appearance. Write class="error-message" not class="red-text" — tomorrow you might change the colour to orange.

How CSS Selects Classes and What Specificity Means

CSS specificity is how the browser decides which rule wins when multiple rules target the same element. The hierarchy (lowest to highest): tag selectors (p { }) < class selectors (.card { }) < id selectors (#main-header { }) < inline styles (style="..."). In practice, what this means for classes: if you write both p { color: black; } and .intro { color: blue; } and you apply class="intro" to a paragraph, the paragraph text will be blue — the class selector wins over the tag selector. This is the whole reason classes exist: they let you override generic tag styles for specific groups of elements without touching the global tag rules. Specificity also explains why .card.shadow (two class selectors combined) beats .card (one class selector) — more specific always wins.

Grouping Multiple Elements with Shared Classes: Efficiency in Action

The real power of classes becomes obvious the moment you have 20 elements that need identical styling. Without classes: 20 separate inline style="..." attributes, all containing the same code, all needing to be updated individually if you change one thing. With classes: one CSS rule, all 20 elements carry class="product-card", and changing one CSS rule updates every card simultaneously. This pattern scales infinitely — a CSS framework like Bootstrap is basically thousands of pre-written class definitions that you apply by name in your HTML. When you see class="btn btn-primary btn-lg" in Bootstrap HTML, that's three classes — .btn sets base button styles, .btn-primary sets the colour, .btn-lg sets the size. Each class does one job. This separation of concerns is the foundation of maintainable web code.

Classes vs Inline Styles: When to Use Which

Inline styles — style="color: blue; font-size: 18px;" directly on an HTML element — have the highest specificity and override class styles. That makes them tempting when you want something to "just work" but also makes them the hardest to maintain. The good news is that classes handle almost every use case more efficiently. Use classes when: you need the same style on more than one element, you want JavaScript to toggle styles by adding/removing a class (classList.add, classList.remove), you're using a framework like Bootstrap or Tailwind, or you want the style to be overridable in responsive media queries. Use inline styles when: you're setting a dynamic value that can only be calculated in JavaScript (element.style.width = someValue + 'px') or you're building email HTML where inline styles are required for Gmail compatibility. In all other cases, classes in external CSS is the professional approach.

Episode 08 Practice Challenge: Style a Navigation Bar with Only Classes

Here's your Episode 08 hands-on challenge. Open your code editor. Create index.html and style.css. In HTML, build a nav element with an unordered list of 4 links (Home, About, Courses, Contact). Give the nav element class="main-nav", the ul class="nav-list", and each li class="nav-item". In CSS: .main-nav { background: #1d3557; padding: 16px 32px; } — .nav-list { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; } — .nav-item a { color: white; text-decoration: none; font-weight: 500; } — .nav-item a:hover { color: #e63946; }. Now add class="nav-item active" to the Home link and in CSS give .active a { border-bottom: 2px solid #e63946; }. That's classes, Flexbox, the cascade, and pseudo-selectors in one short exercise. Drop a screenshot in the video comments — we reply to every one.

FAQs

What is the HTML class attribute used for?

The HTML class attribute is used to link HTML elements to CSS style rules and JavaScript functionality. By giving elements a class name, you allow CSS to target and style that group of elements together, and JavaScript to find and manipulate them with methods like document.querySelectorAll('.class-name'). Without the class attribute, CSS can only target all elements of a tag type globally (every p tag, every div), which makes specific styling impossible on complex pages.

How many CSS classes can one HTML element have?

There is no limit to how many classes an HTML element can have. You simply add multiple class names separated by spaces in the class attribute: class="card shadow-lg rounded-xl featured". Each class name is independent — the element receives all CSS rules from each class simultaneously. This is how utility-first CSS frameworks like Tailwind CSS work, where elements commonly carry 10–15 utility classes at once, each adding one specific CSS property.

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

A class can be used on multiple elements throughout the same page — it's designed for reuse. An id must be unique: only one element on the page should have a given id value. In CSS, class selectors use a dot (.card) and id selectors use a hash (#main-header). In JavaScript, document.querySelectorAll('.card') returns all elements with that class, while document.getElementById('main-header') returns one element. Convention: use classes for styling and grouping; use ids for unique JavaScript targets or page anchor links.

Can I use the same class name on different HTML tags like a div and a span?

Yes — a CSS class works on any HTML element regardless of tag type. .highlight { background: yellow; } will apply equally to a div, a span, a p, an h2, or a button that has class="highlight". The HTML tag type doesn't affect which classes it can carry. This is what makes classes so flexible: a .btn class can style both anchor tags (a) and button elements (button) with identical appearance, even though they're different HTML elements.