Comments in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS snippet?

Consider the following CSS code. What color will the paragraph text be rendered in the browser?

CSS

p {
  color: red; /* This is a comment */
  /* color: blue; */
}

A The paragraph text will be blue.

B The paragraph text will be red.

C The paragraph text will be black (default).

D The CSS will cause a syntax error and no color will apply.

💡 Hint

Look at which color property is active and which is commented out.

CSS comments start with /* and end with */. The blue color line is commented out, so it is ignored. The red color line is active, so the paragraph text will be red.

🧠 Conceptual

intermediate

Which CSS comment style is valid?

Which of the following is the correct way to write a comment in CSS?

A /* This is a comment */

B <!-- This is a comment -->

C // This is a comment

D # This is a comment

💡 Hint

CSS comments use a special pair of characters to start and end.

CSS comments must start with /* and end with */. Other styles like //, , or # are not valid in CSS and will cause errors or be ignored.

❓ selector

advanced

How do comments affect CSS selectors?

Given this CSS code, what color will the div text be?

CSS

div {
  color: green; /* color: orange; */
  /* color: purple; */
}

A The div text will be green.

B The div text will be orange.

C The div text will be purple.

D The div text will be black (default).

💡 Hint

Only uncommented properties apply.

Both orange and purple color lines are inside comments, so they are ignored. Only the green color line applies, so the div text will be green.

❓ layout

advanced

What happens if a comment is not closed in CSS?

What will happen if you write this CSS code?

CSS

body {
  background-color: white; /* This comment is not closed
  color: black;
}

A The browser applies only background-color but not color.

B The browser applies both background-color and color correctly.

C The browser ignores the entire CSS after the unclosed comment, so color and background-color won't apply.

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

💡 Hint

Think about how browsers handle unclosed comments.

If a CSS comment is not closed, the browser treats everything after the /* as part of the comment. The background-color property precedes the /* and applies, but the color property and any following CSS are ignored.

❓ accessibility

expert

Why should comments in CSS be used carefully for accessibility?

Which statement about CSS comments and accessibility is true?

A CSS comments can be read aloud by screen readers if they contain important info.

B Comments in CSS can improve accessibility by explaining styles for screen readers.

C Large CSS comments can slow down screen readers and harm accessibility.

D Comments in CSS are ignored by browsers and do not affect accessibility directly.

💡 Hint

Consider how browsers and assistive technologies treat CSS comments.

CSS comments are ignored by browsers and do not appear in the rendered page or affect screen readers. They do not improve or harm accessibility directly.