Comments in CSS - Mini Project: Build & Apply

Comments in CSS

📖 Scenario: You are creating a simple webpage style. To keep your CSS clear and easy to understand, you want to add comments explaining each style section.

🎯 Goal: Add CSS comments to explain the background color and text color styles in the CSS code.

📋 What You'll Learn

Create a CSS rule for the body element with a background color.

Create a CSS rule for the h1 element with a text color.

Add a comment before the body style explaining it sets the background color.

Add a comment before the h1 style explaining it sets the text color.

💡 Why This Matters

🌍 Real World

Web developers use CSS comments to explain styles so others can understand and maintain the code easily.

💼 Career

Knowing how to write clear CSS comments is important for teamwork and professional web development.

1

Create CSS rules for body and h1

Write CSS code to set the background-color of the body to #f0f0f0 and the color of the h1 to #333333.

CSS

/* Your CSS code here */

Hint

Use CSS selectors body and h1 with curly braces and set the properties inside.

2

Add comment for body background color

Add a CSS comment before the body rule that says Sets the background color of the page.

CSS

/* Add comment about body background color here */
body {
  background-color: #f0f0f0;
}
h1 {
  color: #333333;
}

Hint

CSS comments start with /* and end with */. Place it on the line above the body rule.

3

Add comment for h1 text color

Add a CSS comment before the h1 rule that says Sets the text color of headings.

CSS

/* Sets the background color of the page */
body {
  background-color: #f0f0f0;
}
/* Add comment about h1 text color here */
h1 {
  color: #333333;
}

Hint

Add the comment on the line above the h1 rule using /* and */.

4

Complete CSS with comments

Ensure the CSS code includes both comments exactly as /* Sets the background color of the page */ before body and /* Sets the text color of headings */ before h1.

CSS

/* Verify both comments and CSS rules are present */
/* Sets the background color of the page */
body {
  background-color: #f0f0f0;
}
/* Sets the text color of headings */
h1 {
  color: #333333;
}

Hint

Make sure both comments are exactly as shown and placed before their CSS rules.

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