← HTML & CSS

The class attribute

An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.

Part of: HTML and CSS Journey — Module 15

What it does: Both paragraphs share class="lead". CSS targeting .lead { } will style both paragraphs identically. class="btn primary" applies two classes. CSS can target .btn or .primary independently or together. Unlike id, class values can be reused across many elements - that is the whole point of class-based styling. Class values must be wrapped in double quotes. class=btn without quotes is invalid HTML. Multiple classes are space-separated in one class attribute. Repeating the class attribute is invalid. Like all attributes, class goes in the opening tag only. Closing tags must not contain attributes. A dot (.) targets a class in CSS. A hash (#) targets an id. So .intro { } styles all elements with class="intro".

Common mistakes: Attribute names must be lowercase in HTML. CLASS should be written as class. Class values must be enclosed in double quotes: class="intro", not class=intro without quotes.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of The class attribute (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Can two elements on the same page share the same class value?

YesNo

Matches

↓

Attribute names must be lowercase - CLASS should be class

Applying

Meanings

Term

class

Meaning

An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.

Practice

Testing

Gaps

<p ="intro">Hello</p>

Check Answer

Spots

1<p CLASS="intro">Hello</p>

2<p class="body">More text.</p>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Can two elements on the same page share the same class value?

A. Yes ✓

B. No

Unlike id, class values can be reused across many elements - that is the whole point of class-based styling.

2. Which of these is the correct class attribute syntax?

A. class="btn" ✓

B. class=btn

Class values must be wrapped in double quotes. class=btn without quotes is invalid HTML.

3. True or false: class="my class" with a space applies one class named 'my class'.

A. False ✓

B. True

A space separates class names. class="my class" applies two classes: 'my' and 'class'. Use a hyphen for one name: class="my-class".

4. How do you apply two separate classes to one element?

A. class="btn primary" ✓

B. class="btn" class="primary"

Multiple classes are space-separated in one class attribute. Repeating the class attribute is invalid.

5. True or false: CLASS with capital letters is valid HTML.

A. False ✓

B. True

HTML attribute names must be lowercase. The correct form is class not CLASS.

Match the Pairs

<p class="note">Remember this.</p> → Assigns the CSS class 'note' to this paragraph - any element with class="note" can be styled with .note { }

<li class="item">One</li> <li class="item">Two</li> → Multiple elements sharing the same class - both receive identical CSS styling from .item { }

class values can be reused across many elements for shared CSS styling → <p class="lead">Intro.</p> <p class="lead">More.</p>

Multiple classes are applied with space-separated values inside one class attribute → <button class="btn primary">Go</button>

<p CLASS="note">Text.</p> → Attribute names must be lowercase - CLASS should be class

<p class="my note">Text.</p> → A space creates two class names, not one. Use a hyphen for a single multi-word class: class="my-note"

Key Term

class

An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.

Fill in the Blanks

1. <p class="intro">Hello</p>

Hint: Type the attribute name used to assign a CSS class to an element

2. <h1 class="title">Welcome</h1>

Hint: Type the attribute name that assigns a reusable CSS class

3. <div class="card">Content here.</div>

Hint: Type the attribute name used to group elements for CSS styling

4. <span class="highlight">key term</span>

Hint: Type the attribute name that assigns a CSS class to this span

5. <button class="btn">Click me</button>

Hint: Type the attribute name used to style this button with a CSS class

Spot the Error

Question 1

A <p CLASS="intro">Hello</p>

B <p class="body">More text.</p>

C <p class="end">Last.</p>

Line A — Attribute names must be lowercase in HTML. CLASS should be written as class.

Question 2

A <h1>Title</h1>

B <p class=intro>First paragraph.</p>

C <p>More text.</p>

Line B — Class values must be enclosed in double quotes: class="intro", not class=intro without quotes.

Question 3

A <div class="box">

B <p>Content here.</p>

C <p class="note"Text.</p>

D </div>

Line C — The class attribute value is missing its closing double quote. It should be class="note">.

Question 4

A <header>

B <h1 class="title">Site</h1>

C <nav class="menu">Links</nav>

D <p class="slogan">Hello.</p>

E <div class ="logo">Logo</div>

F </header>

Line E — There must be no space between class and =. The correct form is class="logo" with no space before the equals sign.

Question 5

A <header>

B <h1 class="title">Site</h1>

C <nav class="menu">Links</nav>

D <p class="tag line">Slogan.</p>

E </header>

Line D — Class values cannot contain spaces. A space creates two separate class names. Use a hyphen: class="tag-line".

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?