Writing reusable CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS selector targets all buttons inside a section with class card?

You want to style all <button> elements that are inside any <section> with class card. Which selector correctly does this?

A button.card section { color: blue; }

B .card > button { color: blue; }

C section.card button { color: blue; }

D section button.card { color: blue; }

💡 Hint

Think about how to select buttons that are inside a section with a specific class.

Option C uses the selector section.card button which means any button inside a section with class card. Option C selects buttons that are direct children of any element with class card, but .card could be any element, not necessarily a section. Options A and D have incorrect order or class placement.

❓ layout

intermediate

What is the effect of this CSS on a container with multiple items?

Consider this CSS code:

.container { display: flex; flex-wrap: wrap; gap: 1rem; }

What will you see when multiple child items are inside .container?

A Items will be arranged in a row and wrap to the next line if needed, with 1rem space between them.

B Items will stack vertically with 1rem space between them.

C Items will overlap each other with no spacing.

D Items will be arranged in a column and never wrap.

💡 Hint

Remember what flex-wrap: wrap and gap do in flexbox.

The display: flex makes children line up in a row by default. flex-wrap: wrap allows items to move to the next line if they don't fit. gap: 1rem adds space between items both horizontally and vertically.

❓ accessibility

advanced

Which CSS practice improves accessibility for keyboard users?

You want to make sure focus outlines are visible for keyboard users but not distracting for mouse users. Which CSS snippet achieves this best?

A :active { outline: none; }

B :focus { outline: none; }

C *:hover { outline: 2px solid #005fcc; }

D :focus-visible { outline: 2px solid #005fcc; }

💡 Hint

Focus outlines should appear only when using keyboard navigation.

The :focus-visible pseudo-class applies styles only when the element is focused via keyboard or similar input, not mouse. This keeps outlines visible for keyboard users but hides them for mouse users. Option D removes outlines completely, which harms accessibility. Options C and D do not address keyboard focus properly.

📝 Syntax

advanced

What error does this CSS code cause?

Look at this CSS snippet:

.btn { background-color: blue; color: white; border-radius 5px; }

What happens when a browser tries to read this?

CSS

.btn { background-color: blue; color: white; border-radius 5px; }

A The browser applies all styles except border-radius.

B The browser ignores the entire rule because of missing colon in border-radius.

C The browser throws a syntax error and stops rendering the page.

D The browser applies border-radius but ignores color.

💡 Hint

Check the syntax for property declarations.

The missing colon after border-radius makes that declaration invalid, so the browser ignores only that line but applies the rest. Browsers do not throw syntax errors for CSS but skip invalid declarations.

🧠 Conceptual

expert

How many unique CSS classes are used in this HTML snippet?

Given this HTML:

<div class="card primary">
  <button class="btn primary">Click</button>
  <button class="btn secondary">Cancel</button>
</div>

How many unique CSS class names are present in total?

CSS

<div class="card primary">
  <button class="btn primary">Click</button>
  <button class="btn secondary">Cancel</button>
</div>

A 2

B 4

C 5

D 3

💡 Hint

Count each distinct class name only once.

The classes used are: card, primary, btn, and secondary. That's 4 class names. But note primary is repeated on two elements, so unique classes are card, primary, btn, and secondary. So total unique classes are 4, not 3. The correct answer is 4.