Class attribute in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color will the text be?

Given the following HTML and CSS, what color will the text inside the <p> tag appear as in the browser?

HTML

<style>
.red { color: red; }
.blue { color: blue; }
</style>
<p class="red blue">Hello World!</p>

A Red

B Blue

C Black (default)

D Purple

💡 Hint

CSS rules applied later or with higher specificity override earlier ones.

When multiple classes are applied, the last declared CSS rule with the same specificity wins. Here, .blue is declared after .red, so the text color is blue.

❓ selector

intermediate

Which CSS selector targets all elements with both classes?

You want to style only elements that have both classes btn and primary. Which CSS selector should you use?

A .btn.primary

B .btn, .primary

C #btn.primary

D .btn .primary

💡 Hint

No spaces means both classes on the same element.

The selector '.btn.primary' matches elements that have both classes 'btn' and 'primary'. A space means descendant, so '.btn .primary' matches elements with class 'primary' inside elements with class 'btn'.

🧠 Conceptual

advanced

What happens if you use the same class name multiple times in class attribute?

Consider this HTML: <div class="box box highlight">Content</div>. How does the browser treat the repeated class box?

A The repeated class is ignored; it behaves as if the class appears once.

B The element gets styled twice by the box class, doubling the effect.

C The browser throws an error and does not render the element.

D Only the first occurrence of the class is applied; the rest are ignored.

💡 Hint

Think about how class names are used for styling and scripting.

Class names are treated as a set. Repeating the same class name multiple times has no additional effect; it is as if it appears once.

❓ accessibility

advanced

How to improve accessibility when using class names for styling?

You use class names like red-text or big-font to style elements. What is a better practice to improve accessibility?

A Avoid using any class names to keep HTML clean.

B Use only inline styles instead of class names for better accessibility.

C Use class names with colors and sizes because screen readers read them aloud.

D Use class names that describe the content or role, not just appearance.

💡 Hint

Think about how assistive technologies understand your page.

Class names should describe the meaning or role of content, not just how it looks, so assistive technologies and developers understand the structure better.

📝 Syntax

expert

What error occurs with this class attribute syntax?

What error will the browser show for this HTML snippet?
<div class=red blue>Text</div>

HTML

<div class=red blue>Text</div>

A SyntaxError: class attribute must be quoted.

B The browser ignores the class attribute completely.

C The browser treats 'red' as the class and 'blue' as an unknown attribute, no error but unexpected styling.

D The browser applies both classes correctly without error.

💡 Hint

Look at how HTML attributes are parsed when quotes are missing.

Without quotes, the browser treats the first word as the attribute value and the second word as a separate attribute. So 'class=red' is valid, 'blue' is an unknown attribute.

Practice

1. What is the main purpose of the class attribute in HTML?

easy

A. To group elements for styling or scripting

B. To add inline styles directly to an element

C. To define the element's unique ID

D. To specify the element's text content

Solution

1. Step 1: Understand the role of the class attribute

   The class attribute is used to assign one or more class names to an HTML element.

2. Step 2: Identify the purpose of class names

   Class names help group elements so CSS or JavaScript can target them easily for styling or behavior.

3. Final Answer:

   To group elements for styling or scripting -> Option A

4. Quick Check:

   class attribute groups elements [OK]

Hint: Class groups elements for CSS/JS use [OK]

Common Mistakes:

• Confusing class with id attribute
• Thinking class adds inline styles
• Believing class sets element content

2. Which of the following is the correct way to assign multiple classes to an element?

easy

A. <div class="red,bold"></div>

B. <div class="red bold"></div>

C. <div class="red;bold"></div>

D. <div class="red.bold"></div>

Solution

1. Step 1: Recall how to separate multiple classes

   Multiple classes must be separated by spaces inside the class attribute.

2. Step 2: Check each option's syntax

   <div class="red bold"></div> uses a space between "red" and "bold", which is correct. Others use commas, semicolons, or dots which are invalid.

3. Final Answer:

   <div class="red bold"></div> -> Option B

4. Quick Check:

   Multiple classes separated by spaces [OK]

Hint: Separate multiple classes with spaces [OK]

Common Mistakes:

• Using commas or semicolons instead of spaces
• Trying to join classes with dots
• Forgetting to separate class names

3. What will be the color of the text inside this HTML snippet?

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<p class="red bold">Hello World</p>

medium

A. Default black text, not styled

B. Only red text, not bold

C. Only bold text, not red

D. Red and bold text

Solution

1. Step 1: Identify classes assigned to the paragraph

   The paragraph has two classes: "red" and "bold".

2. Step 2: Check CSS rules for these classes

   "red" sets text color to red, "bold" sets font weight to bold. Both styles apply together.

3. Final Answer:

   Red and bold text -> Option D

4. Quick Check:

   Multiple classes combine styles [OK]

Hint: Multiple classes combine all styles [OK]

Common Mistakes:

• Thinking only one class style applies
• Ignoring combined effects of multiple classes
• Confusing class names with IDs

4. Find the error in this HTML snippet:

<div class=red bold>Content</div>

medium

A. Class attribute cannot have multiple classes

B. Class names should be separated by commas

C. Missing quotes around class attribute value

D. The tag <div> cannot have a class attribute

Solution

1. Step 1: Check syntax for class attribute

   The value of the class attribute must be enclosed in quotes if it contains spaces.

2. Step 2: Identify the error in the snippet

   Here, class=red bold lacks quotes, so the browser misinterprets it.

3. Final Answer:

   Missing quotes around class attribute value -> Option C

4. Quick Check:

   Class attribute values with spaces need quotes [OK]

Hint: Always quote class values with spaces [OK]

Common Mistakes:

• Omitting quotes for multiple classes
• Separating classes with commas
• Thinking class attribute is invalid on div

5. You want to style all buttons with a green background and white text, but only those with class primary should also be bold. Which HTML and CSS setup achieves this?

hard

A. <button class="btn primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; }

B. <button class="btn,primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; }

C. <button class="btn primary">Click</button>\n.btn.primary { background: green; color: white; font-weight: bold; }

D. <button class="primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; }

Solution

1. Step 1: Understand the requirement for styling

   All buttons get green background and white text via class "btn". Only "primary" buttons are bold.

2. Step 2: Check HTML and CSS correctness

   <button class="btn primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; } correctly assigns two classes separated by space and styles them separately. <button class="btn,primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; } uses comma in class attribute which is invalid. <button class="btn primary">Click</button>\n.btn.primary { background: green; color: white; font-weight: bold; } combines styles but makes all primary buttons green and bold, missing the separate "btn" style. <button class="primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; } misses "btn" class on button, so green background won't apply.

3. Final Answer:

   <button class="btn primary">Click</button>\n.btn { background: green; color: white; }\n.primary { font-weight: bold; } -> Option A

4. Quick Check:

   Multiple classes separated by spaces with separate CSS rules [OK]

Hint: Use spaces to assign multiple classes, style separately [OK]

Common Mistakes:

• Using commas instead of spaces in class attribute
• Combining unrelated styles in one CSS selector
• Forgetting to assign all needed classes in HTML