CSS Comments

In the last lesson you learned about CSS Selectors. So now you know how to pick an element and style it. Let’s look at something small but very useful. It is called a CSS comment.

📝 What is a CSS Comment?

A comment is a note you write in your code for yourself. The browser reads it but does nothing with it. It just skips over it.

So a comment is not for the computer. It is for people. You, or someone else, can read it later and understand what the code is doing.

Think of it like a sticky note on a box. You pack some things in a box. Then you stick a small note on top that says “winter clothes”. The box does not care about the note. But when you come back months later, that note saves you a lot of guessing. A comment in CSS works the same way.

✍️ How to Write a Comment

In CSS you start a comment with /* and end it with */. Anything you put between those two marks is the comment.

Here is a simple comment sitting above a rule.

/* This makes all headings blue */
h1 {
  color: blue;
}

See the line at the top? The browser reads /* This makes all headings blue */ and ignores it. Then it reads the h1 rule and colors your headings blue.

Two small things to keep in mind here.

• A comment always starts with /* and ends with */. You need both parts.
• CSS has only this one style of comment. There is no short single-line comment like // here.

🤔 Why Do We Need Comments?

When you write a few lines of CSS, everything feels clear. But real projects have hundreds of lines. After a week you open the file and think “why did I write this?”.

A comment answers that question before you even ask it. Here is where comments really help you.

• They explain tricky code. Some lines look strange but do an important job. A comment tells the next person why it is there.
• They label sections. In a big file you can mark where the header styles start, where the footer styles start, and so on.
• They leave a reminder. You can write a quick note to fix something later.
• They help a team. Other people read your CSS too. A short note helps them understand your thinking fast.

💡 A Real Example

Let’s see comments in a file that styles a simple web page. The comments label each part so you can find things quickly.

/* ===== Header styles ===== */
header {
  background-color: black;
  color: white;
}

/* ===== Main button ===== */
.btn {
  padding: 10px 20px;
  /* Rounded corners look softer */
  border-radius: 8px;
}

/* ===== Footer styles ===== */
footer {
  font-size: 14px;
}

Read through it slowly. The lines with ===== work like signboards. They tell you “header section starts here” and “footer section starts here”. The little note next to border-radius explains why that line is there. None of these comments change how the page looks. They only help the person reading the code.

🚫 Commenting Out Code

There is one more handy use. You can use a comment to turn off a line of CSS without deleting it. This is called commenting out code.

Say a rule is causing trouble and you want to test the page without it. You do not have to delete it. You just wrap it in comment marks.

Here the background color is switched off for testing.

.box {
  /* background-color: red; */
  color: white;
}

Now the browser skips the background-color line because it sits inside /* */. The text still turns white. Later, if you want the red background back, you remove the comment marks and it works again. So comments let you test things in a safe way.

⚠️ Common Mistakes

A few small slips trip up beginners. Watch out for these.

The first one catches people the most. If your styles suddenly stop working after some point, check for a missing */.

/* ❌ Avoid: no closing mark here, so this breaks everything below
h1 {
  color: blue;
}

/* ✅ Good: opened and closed properly */
h1 {
  color: blue;
}

✅ Best Practices

Comments are helpful, but only when you use them well. Keep these habits in mind.

• Write short and clear notes. Say what the code does or why. No long paragraphs.
• Comment the why, not the obvious. color: red; does not need a note saying “this makes it red”. We can already see that. Explain the parts that are not obvious.
• Use section labels in big files. A line like /* ===== Navigation ===== */ helps you jump to the right place fast.
• Remove old commented-out code. Once you are sure you do not need it, delete it. Too much dead code makes the file messy.

🧩 What You’ve Learned

You picked up a small skill that makes your code much easier to read. Here is the recap.

• ✅ A comment is a note for people. The browser ignores it.
• ✅ You write it with /* to open and */ to close.
• ✅ Comments explain tricky code, label sections, and leave reminders.
• ✅ You can comment out a line to switch it off without deleting it.
• ✅ CSS has no // comment, and you must always close with */.

🚀 What’s Next?

Now that your code can explain itself, let’s make your pages look good with color.

CSS Colors