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.