Comments in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the syntax for writing a comment in CSS?

A CSS comment starts with /* and ends with */. Anything between these markers is ignored by the browser.

beginner

Can CSS comments be placed inside a CSS rule or only outside?

CSS comments can be placed anywhere in the CSS file, including inside CSS rules, between properties, or outside rules. They do not affect the styles.

beginner

Why should you use comments in your CSS code?

Comments help explain your code to yourself and others. They make it easier to understand, maintain, and update styles later.

beginner

Are CSS comments visible on the webpage when viewed in a browser?

No, CSS comments are not shown on the webpage. They are only visible in the CSS source code and ignored by the browser when rendering.

intermediate

What happens if you forget to close a CSS comment?

If a CSS comment is not closed with */, the browser will treat the rest of the CSS file as a comment, causing styles to break or not apply.

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

A // This is a comment

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

C /* This is a comment */

D # This is a comment

CSS comments start with /* and end with */. Other styles are used in different languages.

Can CSS comments be placed between CSS properties inside a rule?

A Only at the end of the CSS file.

B Yes, comments can be placed anywhere in CSS.

C Only at the start of the CSS file.

D No, comments can only be outside rules.

CSS comments can be placed anywhere, including inside CSS rules between properties.

What will happen if you forget to close a CSS comment?

A The browser ignores the rest of the CSS file.

B The comment closes automatically.

C The CSS file will work normally.

D The browser shows an error message.

Without closing, the browser treats the rest of the CSS as comment, so styles won't apply.

Are CSS comments visible on the webpage when viewed by users?

A No, they are only in the source code.

B Yes, they appear as text on the page.

C Only in some browsers.

D Only if you use special tags.

CSS comments are ignored by browsers and do not show on the webpage.

Why is it good to use comments in CSS?

A To hide CSS from browsers.

B To make the page load faster.

C To change the color of text.

D To explain code and make it easier to maintain.

Comments help explain your code for yourself and others, improving maintenance.

Explain how to write a comment in CSS and why it is useful.

Think about how comments help you understand your own notes later.

Describe what happens if a CSS comment is not properly closed.

Imagine leaving a note open without an ending.

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