Common UI use cases in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Which CSS rule creates a responsive two-column layout using Flexbox?

You want to create a container that displays two columns side by side on wide screens and stacks them vertically on narrow screens. Which CSS rule achieves this behavior?

CSS

/* Container CSS */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Column CSS */
.column {
  flex: 1 1 300px;
  background-color: lightgray;
  padding: 1rem;
}

A Set .container { display: flex; flex-direction: column; } and .column { flex: 1; }

B Set .container { display: grid; grid-template-columns: repeat(2, 1fr); } and .column { width: 50%; }

C Set .container { display: block; } and .column { float: left; width: 50%; }

D Set .container { display: flex; flex-wrap: wrap; } and .column { flex: 1 1 300px; }

💡 Hint

Flexbox with wrapping allows columns to stack on narrow screens.

Option D uses flexbox with wrapping and flexible basis, so columns take at least 300px and wrap to next line if needed, making it responsive.

Option D uses grid but fixes columns at 50%, which is not responsive without media queries.

Option D uses float, which is outdated and less flexible.

Option D stacks columns vertically always due to flex-direction: column.

❓ accessibility

intermediate

Which HTML and CSS combination improves keyboard accessibility for a custom button?

You create a clickable

styled as a button. Which combination ensures it is accessible via keyboard and screen readers?

CSS

<div class="custom-button" tabindex="0" role="button">Click me</div>

A Add tabindex="0" and role="button" to the div, and style with :focus outline.

B Add onclick handler only, no tabindex or role needed.

C Use a <span> with role="button" but no tabindex.

D Use a <div> with tabindex="-1" and role="button".

💡 Hint

Keyboard users need focus and screen readers need role.

Option A adds tabindex="0" so the div is focusable by keyboard and role="button" so screen readers announce it as a button. Styling :focus helps users see focus.

Option A lacks keyboard focus and role, so keyboard users and screen readers miss it.

Option A lacks tabindex, so not keyboard focusable.

Option A uses tabindex="-1", which removes keyboard focus.

❓ selector

advanced

What does the CSS selector :is(.btn, .link) > span target?

Given the selector :is(.btn, .link) > span, which elements will it select?

A All elements with class .btn or .link that are direct children of a <span>.

B All elements with class .btn or .link that contain a <span> child.

C All <span> elements that are direct children of elements with class .btn or .link.

D All <span> elements anywhere inside elements with class .btn or .link.

💡 Hint

The > means direct child, :is groups selectors.

The :is(.btn, .link) groups selectors .btn and .link. The > span means select elements that are direct children of those elements.

Option C correctly describes this.

Option C reverses parent and child.

Option C misses the direct child requirement.

Option C describes a parent selector, which CSS does not support.

❓ rendering

advanced

What visual effect does this CSS produce on a button when hovered?

Consider this CSS for a button: .button { background-color: #007BFF; color: white; padding: 1rem 2rem; border-radius: 0.5rem; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } What will the user see when they hover over the button?

A The button text color changes from white to dark blue instantly.

B The button background smoothly changes from bright blue to a darker blue over 0.3 seconds.

C The button border radius increases on hover.

D The button background color changes instantly with no transition.

💡 Hint

Look at the transition property and the hover background-color.

The transition property applies to background-color changes over 0.3 seconds with easing.

On hover, background-color changes from #007BFF (bright blue) to #0056b3 (darker blue) smoothly.

Text color and border radius do not change.

🧠 Conceptual

expert

How many items will be visible in this CSS Grid container with overflow hidden?

Given this HTML and CSS: HTML:

1

2

3

4

5

CSS: .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; height: 200px; overflow: hidden; } .item { border: 1px solid black; font-size: 2rem; display: flex; justify-content: center; align-items: center; } How many .item elements will be fully visible inside the container?

A 4 items

B 5 items

C 2 items

D 3 items

💡 Hint

Calculate how many grid cells fit in 200px height with 100px rows.

The grid has 2 columns and rows of 100px height.

The container height is 200px, so it fits exactly 2 rows.

2 columns × 2 rows = 4 items fully visible.

The 5th item is outside and hidden by overflow: hidden.

Practice

1. Which CSS property is commonly used to add space inside a button to make it easier to click?

easy

A. font-size

B. margin

C. padding

D. border

Solution

1. Step 1: Understand padding's role

   Padding adds space inside an element, between its content and border, making buttons larger and easier to click.

2. Step 2: Differentiate from margin

   Margin adds space outside the element, not inside. Border and font-size do not add internal space.

3. Final Answer:

   padding -> Option C

4. Quick Check:

   Internal space in buttons = padding [OK]

Hint: Padding adds inside space; margin adds outside space [OK]

Common Mistakes:

• Confusing margin with padding
• Using border to add space
• Changing font-size to add space

2. Which CSS selector correctly targets all buttons with the class primary?

easy

A. button.primary

B. .button primary

C. #primary button

D. button#primary

Solution

1. Step 1: Understand class selector syntax

   To select elements with a class, use a dot (.) before the class name. Combining with element name is element.class.

2. Step 2: Analyze each option

   button.primary selects all button elements with class primary. .button primary is invalid syntax. #primary button selects buttons inside an element with id primary. button#primary selects button with id primary.

3. Final Answer:

   button.primary -> Option A

4. Quick Check:

   Class selector with element = element.class [OK]

Hint: Use dot before class name, no spaces for element.class [OK]

Common Mistakes:

• Using space instead of dot
• Confusing id (#) with class (.)
• Wrong order of selectors

3. What will be the background color of the button when hovered, given this CSS?

button {
  background-color: blue;
  color: white;
}
button:hover {
  background-color: green;
}

medium

A. Blue

B. Green

C. White

D. No change

Solution

1. Step 1: Understand the hover pseudo-class

   The :hover selector changes styles when the mouse is over the element.

2. Step 2: Check the hover background-color

   On hover, the background-color changes from blue to green as defined.

3. Final Answer:

   Green -> Option B

4. Quick Check:

   Hover changes background to green [OK]

Hint: Hover styles override normal styles on mouse over [OK]

Common Mistakes:

• Ignoring :hover effect
• Confusing color with background-color
• Assuming no style change on hover

4. This CSS code is intended to center a card horizontally, but it doesn't work:

.card {
  width: 300px;
  margin: 0 auto 0 auto;
  display: inline-block;
}

What is the main reason it fails?

medium

A. 'display: inline-block' prevents 'margin: 0 auto' from centering block elements

B. Width is missing units

C. Margin syntax is incorrect

D. The card needs 'text-align: center' on parent

Solution

1. Step 1: Understand margin auto centering

   Margin auto centers block elements with a fixed width horizontally.

2. Step 2: Check display property effect

   Setting display: inline-block makes the element inline-level, so margin: 0 auto does not center it.

3. Final Answer:

   'display: inline-block' prevents 'margin: 0 auto' from centering block elements -> Option A

4. Quick Check:

   Inline-block disables margin auto centering [OK]

Hint: Use block display for margin auto centering [OK]

Common Mistakes:

• Using inline-block instead of block
• Wrong margin syntax
• Forgetting width units

5. You want to create a responsive navigation bar with evenly spaced links that wrap on small screens. Which CSS layout method is best suited for this?

hard

A. Use inline-block links with fixed margins

B. Grid with fixed column widths

C. Float each link left with fixed widths

D. Flexbox with flex-wrap: wrap and justify-content: space-between

Solution

1. Step 1: Identify layout needs

   We want links spaced evenly and wrapping on small screens, so flexible layout and wrapping are needed.

2. Step 2: Evaluate layout methods

   Flexbox supports flexible spacing and wrapping with flex-wrap: wrap and justify-content: space-between. Grid with fixed columns won't wrap well. Floats and inline-block are outdated and less flexible.

3. Final Answer:

   Flexbox with flex-wrap: wrap and justify-content: space-between -> Option D

4. Quick Check:

   Responsive spacing and wrapping = Flexbox wrap + space-between [OK]

Hint: Use flex-wrap and justify-content for responsive nav bars [OK]

Common Mistakes:

• Using fixed widths preventing wrap
• Relying on floats for layout
• Ignoring flex-wrap property