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.