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 */

Need a 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;
}

Need a 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;
}

Need a 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;
}

Need a hint?

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