CSS · Module 13 · Lesson 4 of 48

CSS Comments

What are CSS Comments?

Imagine you are writing a complex recipe book. Next to some difficult steps, you write small sticky notes like: *"Note: Do not open the oven door during the first 10 minutes!"* These notes are for you, not the diner eating the meal.

In CSS, Comments are text notes written inside your stylesheet that are completely ignored by the browser. They are used to document your code, organize different styling sections, or temporarily disable rules while testing.

Why does it matter?

As stylesheets grow to hundreds or thousands of lines long, comments help keep your code organized. You can create visual headers to separate layout styles, button styles, and color schemes. It also allows you to explain complex layout choices to other developers (or your future self!).

Syntax Breakdown

CSS comments start with /* and end with */. Anything between these markers is ignored by the browser:

/* This is a single-line CSS comment */

/*
  This is a multi-line comment.
  It can span across several lines
  without breaking.
*/

/* CSS Comments look like this */
h1 { color: red; } /* Style for main title */

Common Mistakes

Using HTML comments in CSS: Writing  inside a CSS stylesheet or <style> block is a syntax error that will cause the browser to break all the surrounding styles. Always use /* ... */ in CSS.

Forgetting to close the comment: If you forget to add the closing marker */, the browser will treat the entire rest of your CSS file as one giant comment and stop styling your website completely!

Quick Reference

/* — Starts a CSS comment.

*/ — Ends a CSS comment.

Ignored by parser — Comments have zero effect on page loading styles.

Your Task

Inside the `<style>` block, add a CSS comment containing the text 'This is a comment'. Make sure it uses the proper CSS comment syntax `/* ... */`.

index.html

Type code above to start the lesson.

Live Preview