Back

HTML Notes · Lesson 1.8 (Short)

Divs, Classes & IDs

CODE SCOPE HTML SERIESLESSON 1.8 OF 1.1–1.9FROM A CODE SCOPE SHORT

Div, class and id explained simply: div is a box, class is a group name, id is a unique name — and how CSS finds them with . and #.

Watch the video Download PDF

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

In the next series, CSS will paint your pages — colours, sizes, layouts. But CSS cannot style "that box over there": it finds elements by name. This short lesson teaches the naming system of HTML: the plain <div> box, the shared class name, and the unique id name. Three small ideas — and every styled page on the internet stands on them. (Roman Urdu: CSS ko har cheez ka naam chahiye hota hai — div dabba hai, class group ka naam, id sirf aik ka naam.)

Key points

  • <div> is a plain box — a container that groups content together. It has no meaning of its own; we use it to divide the page into parts so we can style and arrange them.(Roman Urdu: div = khaali dabba, page ko hisson mein baantne ke liye.)
  • class = a group name. Many elements can share the same class, and one element can have many classes. Example: all product boxes on a shop page have class="product". Think of it like a school class: one class holds many students — and one student can also belong to the cricket team and the debate team at the same time. Groups overlap; that is normal.
  • id = a unique name. Only one element on the whole page may have a given id. The lesson's example: id is like a CNIC number — one person, one number, never shared.
  • Easy memory line: div = box, class = group, id = unique.
  • Why names matter: CSS and JavaScript find elements by these names. In CSS: The CSS series will use this from its very first lesson. You do not need to learn CSS today — just fix the pairings in memory: dot finds a class, hash finds an id.
    • .product selects by class (dot = class).
    • #price selects by id (hash = id).
  • Names cannot have spaces. Join words with - or _, like class="main-heading".

Code examples

Example 1 — Same class, one unique id

<div class="box">Box 1</div>
<div class="box" id="special-box">Box 2</div>
<div class="box">Box 3</div>

What it does: Three boxes share the group name box — CSS can style all three together with .box. The middle box also has the unique id special-box — CSS can pick only that one with #special-box.

What you will see: today, three plain lines of text — names do not change the look by themselves. The power appears in the CSS series: one rule for .box will dress all three boxes at once, and one rule for #special-box will single out the middle one, like one student called out of a whole class by name.

Example 2 — One element, two classes

<div class="box">Box 1 — only in the box group</div>
<div class="box highlight">Box 2 — in the box group AND the highlight group</div>

What it does: The second div carries two group names, separated by one space inside the same class attribute. It belongs to the box group and to the highlight group at the same time.

What you will see: again, two plain boxes for now. But note the trap hidden here: class="box highlight" is two classes, not one class with a space in its name — this is exactly why real names join words with a dash, like main-heading.

Example 3 — Reading names: who can find this div?

<div class="card" id="main-card">Admission Card</div>

What it does: One div wearing all three ideas at once: it is a box (<div>), it belongs to the group of all cards (.card in CSS), and it is the one and only main card (#main-card in CSS).

What you will see: a single line, "Admission Card". But three different selectors can now find it, each in its own way: div finds it as a box, .card finds it together with every other card on the page, and #main-card finds only this one — the difference between calling a whole class and calling one student by name.

Quick recap

  • <div> = a plain box that groups content; it has no meaning of its own.
  • class = a group name: many elements can share it, and one element can hold many classes.
  • id = a unique name: one element per page, like a CNIC number — one person, one number.
  • CSS finds elements by name: . (dot) = class, # (hash) = id.
  • Names never contain spaces — join words with - or _ (main-heading).

Common mistakes

  1. The same id on two elements — id means unique. If many elements need the same style, that is a class, not an id.
  2. Spaces in names — class="main heading" is actually read as two classes (main and heading). Use main-heading.
  3. Using a div where a meaning tag fits — a top part should be <header>, not <div class="header"> (Lesson 1.7). Div is for parts that have no special meaning tag.

Practice

  1. Make a page with 4 divs: give all of them class="card", and give only the third one id="best-card". Write next to each (in a comment or on paper) which CSS selector — .card or #best-card — would select it.
  2. Look at your Lesson 1.9 profile project (or your 1.1 page) and mark: which parts are groups (class) and which part is one-of-a-kind (id)?