CSS Comments


🔹 What Are CSS Comments?

CSS comments are used to explain your code or to temporarily disable part of your CSS.
They do not affect how the CSS runs and are completely ignored by the browser.


🔸 Syntax of CSS Comments
/* This is a comment */
  • Starts with /*

  • Ends with */

  • Can be placed on a separate line or inline with code


🔸 Example 1 – Comment on its own line
/* Set background color */
body {
  background-color: lightgray;
}

🔸 Example 2 – Inline comment
p {
  color: blue; /* Make text blue */
}

🔸 Example 3 – Disable a rule
/*
h1 {
  color: red;
}
*/

✅ The above rule will not apply because it’s inside a comment block.


🔸 Why Use Comments in CSS?

  • To explain sections of your code

  • To organize long stylesheets

  • To debug by temporarily turning styles off


Practice Questions

Q1. Add a comment before setting the text color of all <h1> elements.

Q2. Add a comment above a rule that changes the font size of paragraphs.

Q3. Write a CSS rule for <body> with a comment explaining the background color.

Q4. Add an inline comment to a rule that sets the color of <h2> to red.

Q5. Write a comment to describe the purpose of a .box class.

Q6. Temporarily disable a CSS rule that adds a border to all images.

Q7. Add a comment inside the CSS file explaining that a section is for buttons.

Q8. Comment out the entire CSS block for .card.

Q9. Add a comment stating that a section of CSS applies only to the homepage.

Q10. Add a comment to explain why box-sizing: border-box; is being used.


Go Back Top