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.

Practice

1. What is the correct way to write a comment in CSS?

easy

A. // This is a comment

B. # This is a comment

C.

D. /* This is a comment */

Solution

1. Step 1: Identify CSS comment syntax

   CSS comments always start with /* and end with */.

2. Step 2: Compare options with CSS syntax

   Only /* This is a comment */ uses /* and */ correctly; others are for different languages.

3. Final Answer:

   /* This is a comment */ -> Option D

4. Quick Check:

   CSS comments = /* comment */ [OK]

Hint: CSS comments always use /* and */ symbols [OK]

Common Mistakes:

• Using // which is for JavaScript
• Using which is for HTML
• Using # which is for some scripting languages

2. Which of the following is a valid CSS comment placement?

easy

A. /* color: red; color: blue;

B. color: red; /* This sets text color */

C. color: green; // This is green

D. color: yellow; # This is yellow

Solution

1. Step 1: Check comment syntax in each option

   Only color: red; /* This sets text color */ uses correct /* ... */ syntax. /* color: red; color: blue; starts /* but lacks closing */ making it invalid. C uses // invalid in CSS. D uses # invalid.

2. Step 2: Verify comment placement

   color: red; /* This sets text color */ correctly places the comment after the property value and semicolon, a valid inline position.

3. Final Answer:

   color: red; /* This sets text color */ -> Option B

4. Quick Check:

   Valid comment placement = after property with /* */ [OK]

Hint: Use /* comment */ after or around CSS code [OK]

Common Mistakes:

• Using // or # for comments
• Placing comments inside property values
• Commenting out code unintentionally

3. What will be the color of the text rendered by this CSS?

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

medium

A. Blue

B. Black (default)

C. No color applied

D. Red

Solution

1. Step 1: Understand comment effect on CSS

   Comments do not apply styles; they are ignored by the browser.

2. Step 2: Analyze which color property is active

   The line setting color to red is commented out, so only color: blue; applies.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Commented code ignored = blue color applied [OK]

Hint: Commented CSS lines do not affect styles [OK]

Common Mistakes:

• Thinking commented lines still apply styles
• Confusing comment syntax with disabling code
• Assuming last property always wins

4. Identify the error in this CSS snippet:

body {
  color: green; /* Set text color
  background: white;
}

medium

A. Missing closing */ for the comment

B. Missing semicolon after color property

C. background property is invalid

D. No error, code is correct

Solution

1. Step 1: Check comment syntax

   The comment starts with /* but does not have a closing */.

2. Step 2: Understand impact of missing comment end

   Without closing */, the rest of the CSS is treated as comment, causing errors.

3. Final Answer:

   Missing closing */ for the comment -> Option A

4. Quick Check:

   Every /* must have matching */ [OK]

Hint: Always close comments with */ to avoid errors [OK]

Common Mistakes:

• Forgetting to close comments
• Assuming semicolon fixes comment errors
• Ignoring that unclosed comments break CSS

5. You want to temporarily disable a CSS rule without deleting it. Which is the best way to do this?

hard

A. Change the property values to empty strings

B. Delete the rule and save a backup elsewhere

C. Wrap the rule inside /* and */ comment markers

D. Use // before the rule to comment it out

Solution

1. Step 1: Understand how to disable CSS rules temporarily

   Using comments /* */ around a rule disables it without deleting.

2. Step 2: Evaluate other options

   Deleting loses the rule, empty strings may cause invalid CSS, and // is not valid in CSS.

3. Final Answer:

   Wrap the rule inside /* and */ comment markers -> Option C

4. Quick Check:

   Use /* */ to disable CSS rules temporarily [OK]

Hint: Comment out rules with /* */ to disable temporarily [OK]

Common Mistakes:

• Using // which is invalid in CSS
• Deleting instead of commenting
• Setting properties to empty strings causing errors