Comments in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to write a CSS comment.

CSS

/* [1] This is a comment */

Drag options to blanks, or click blank then click option'

AThis is

B/*

C//

D<!--

Attempts:

3 left

💡 Hint

Common Mistakes

Using // for comments, which is for JavaScript, not CSS.

Using which is for HTML comments.

The correct way to write a comment in CSS is to enclose the comment text between /* and */. The blank is for the comment text itself.

2fill in blank

medium

Complete the code to comment out the CSS rule.

CSS

[1] .box { color: red; } [2]

Drag options to blanks, or click blank then click option'

A//

B/*

C<!--

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using // which only comments one line in JavaScript, not CSS.

Using # which is for IDs in CSS, not comments.

To comment out a block in CSS, you use /* at the start and */ at the end. Here, the blanks are for the opening and closing comment tags.

3fill in blank

hard

Fix the error in this CSS comment.

CSS

/* This is a [1] comment */

Drag options to blanks, or click blank then click option'

Awrong */

Bnested /*

Ccorrect

Dend */

Attempts:

3 left

💡 Hint

Common Mistakes

Including '*/' inside the comment text which ends the comment early.

Trying to nest comments which CSS does not support.

The comment text should not contain the comment end token */ inside it. The correct option is just plain text inside the comment.

4fill in blank

hard

Fill both blanks to write a multi-line CSS comment.

CSS

[1] This is a
multi-line comment [2]

Drag options to blanks, or click blank then click option'

A/*

B//

C*/

D<!--

Attempts:

3 left

💡 Hint

Common Mistakes

Using // which only comments one line in JavaScript, not CSS.

Using HTML comment tags which do not work in CSS.

Multi-line comments in CSS start with /* and end with */. The text in between can span multiple lines.

5fill in blank

hard

Fill all three blanks to comment out two CSS rules.

CSS

[1] .header { color: blue; } [2] .footer { color: green; } [3]

Drag options to blanks, or click blank then click option'

A/*

B*/

D//

Attempts:

3 left

💡 Hint

Common Mistakes

Using // which is not valid for CSS comments.

Not closing the comment properly with */.

To comment out multiple CSS rules, you start with /*, then write the rules, close the comment with */. Here, the first blank is the comment start token, and the second and third blanks should be the comment end tokens if closing multiple comments, but typically only one comment block is needed.

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