CSS syntax and rules - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS snippet?

Given the CSS below, what color will the paragraph text be rendered in a browser?

CSS

p { color: blue; color: red; }

A Blue

B Green

C Black (default)

D Red

💡 Hint

Later rules override earlier ones if they have the same specificity.

The last color property in the same rule overrides the previous one. So the paragraph text will be red.

❓ selector

intermediate

Which selector matches only direct children?

Which CSS selector matches only the direct children of a div element?

A div p

B div > p

C div + p

D div ~ p

💡 Hint

Look for the selector that uses the child combinator symbol.

The > symbol selects only direct children. So div > p matches p elements that are immediate children of div.

❓ layout

advanced

What layout will this CSS produce?

Given the CSS below, how will the three boxes be arranged visually?

CSS

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

A Boxes arranged vertically in a column with space between

B Boxes arranged horizontally in a row with space between

C Boxes stacked on top of each other with no space

D Boxes arranged randomly with overlapping

💡 Hint

Check the flex-direction property value.

The container uses flexbox with flex-direction: column, so boxes stack vertically. The gap adds space between them.

❓ accessibility

advanced

Which CSS rule improves text accessibility?

Which CSS rule below best improves text readability for users with visual impairments?

A p { color: #999; background-color: #999; }

B p { color: #777; background-color: #eee; }

C p { color: #000; background-color: #fff; }

D p { color: #ccc; background-color: #ddd; }

💡 Hint

Good contrast between text and background helps readability.

Black text on white background (#000 on #fff) provides the highest contrast, making text easier to read.

🧠 Conceptual

expert

What error does this CSS cause?

What error or issue will this CSS cause when applied in a browser?

CSS

div {
  color: blue;
  background-color: yellow;
}

A Syntax error due to missing semicolon after color property

B Background color will not apply but no error

C Both properties apply correctly

D Browser crashes

💡 Hint

Check punctuation between CSS declarations.

Missing semicolon after color: blue causes a syntax error, so the browser ignores the entire rule or stops parsing at that point.