The class attribute
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Can two elements on the same page share the same class value?
2. Which of these is the correct class attribute syntax?
3. True or false: class="my class" with a space applies one class named 'my class'.
4. How do you apply two separate classes to one element?
5. True or false: CLASS with capital letters is valid HTML.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<p class="note">Remember this.</p> | AAttribute names must be lowercase - CLASS should be class | |
| 2<li class="item">One</li> <li class="item">Two</li> | BAssigns the CSS class 'note' to this paragraph - any element with class="note" can be styled with .note { } | |
| 3class values can be reused across many elements for shared CSS styling | C<button class="btn primary">Go</button> | |
| 4Multiple classes are applied with space-separated values inside one class attribute | DA space creates two class names, not one. Use a hyphen for a single multi-word class: class="my-note" | |
| 5<p CLASS="note">Text.</p> | E<p class="lead">Intro.</p> <p class="lead">More.</p> | |
| 6<p class="my note">Text.</p> | FMultiple elements sharing the same class - both receive identical CSS styling from .item { } |
C
Definitions
class
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<p ___="intro">Hello</p>
2.
<h1 ___="title">Welcome</h1>
3.
<div ___="card">Content here.</div>
4.
<span ___="highlight">key term</span>
5.
<button ___="btn">Click me</button>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<p CLASS="intro">Hello</p>
B
<p class="body">More text.</p>
C
<p class="end">Last.</p>
Question 2
A
<h1>Title</h1>
B
<p class=intro>First paragraph.</p>
C
<p>More text.</p>
Question 3
A
<div class="box">
B
<p>Content here.</p>
C
<p class="note"Text.</p>
D
</div>
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>
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>
Answer Key
The class attribute
Section A: Quick Questions
Q1
B — Yes
Q2
A — class="btn"
Q3
A — False
Q4
A — class="btn primary"
Q5
B — False
Section B: Match the Pairs
Q1
<p class="note">Remember this.</p> → Assigns the CSS class 'note' to this paragraph - any element with class="note" can be styled with .note { }
Q2
<li class="item">One</li>
<li class="item">Two</li> → Multiple elements sharing the same class - both receive identical CSS styling from .item { }
Q3
class values can be reused across many elements for shared CSS styling → <p class="lead">Intro.</p>
<p class="lead">More.</p>
Q4
Multiple classes are applied with space-separated values inside one class attribute → <button class="btn primary">Go</button>
Q5
<p CLASS="note">Text.</p> → Attribute names must be lowercase - CLASS should be class
Q6
<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"
Section C: Definitions
Q1
class — An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.Section D: Fill in the Blanks
Q1
<p class="intro">Hello</p>Q2
<h1 class="title">Welcome</h1>Q3
<div class="card">Content here.</div>Q4
<span class="highlight">key term</span>Q5
<button class="btn">Click me</button>Section E: Spot the Error
Q1
A — Attribute names must be lowercase in HTML. CLASS should be written as class.
Q2
B — Class values must be enclosed in double quotes: class="intro", not class=intro without quotes.
Q3
C — The class attribute value is missing its closing double quote. It should be class="note">.
Q4
E — There must be no space between class and =. The correct form is class="logo" with no space before the equals sign.
Q5
D — Class values cannot contain spaces. A space creates two separate class names. Use a hyphen: class="tag-line".