Beginner’s Guide to CSS Comments

Have you ever come back to a CSS project and felt completely lost while looking at your own code? 

It’s easy to forget what’s going on and make mistakes when editing. And it’s not because you forgot CSS, it’s because style sheets don’t explain themselves.

Fortunately, there’s a simple habit that can change that. It’s something employers and development teams look for, and it can make your work stand out for all the right reasons. It doesn’t affect how your site looks, but it can save hours of confusion later.

In this guide, I’ll walk you through how comments work, the differences between comments in CSS and other languages, practical ways to use them, and the common mistakes to avoid. 

Sidenote: Want to take your web design to the next level? Check out my complete CSS course:

Learn everything from CSS basics to advanced CSS techniques by completing 100+ exercises and projects. You’ll learn how to use CSS to create beautiful, responsive websites that wow users and employers. Become a CSS Pro and never create an ugly website again.

With that out of the way, let’s get into this 5-minute tutorial…

A comment in coding is kind of like a Post-it note that you leave inside your code. It doesn’t affect the code itself or show up in the browser. It’s just there so that the person checking out the code can understand what’s happening more easily.

It’s such a simple thing to use, but trust me when I say that using comments can save you from a lot of frustration. 

For example

Imagine your project already has a global button style that works fine everywhere, except on the homepage hero section, where the layout shifts slightly and makes the button look off-center. 

So rather than changing the global style and risking breaking buttons site-wide, you might add a specific rule just for that section:

.hero button {
    padding: 14px 24px;
}

It works and everything is fine. 

But then 12 months pass, and something breaks this, and you’re not sure what’s going on. So you have to open up all your code, scan through hundreds of lines to find this section, and then try to figure out why you had even done this in the first place.

That would suck, right?

The better solution would be to simply add a comment explaining what you did in this code block, so that you can find it easily, and then figure out how to apply the fix.

/* Extra padding for homepage hero button alignment */
.hero button {
    padding: 14px 24px;
}

Handy, right?

It’s even more useful when you’re working on a team and other people may have to inspect and fix the code, which is why team leads and employers love coders who have this habit.

So let’s look at how to do this.

Writing a CSS comment is actually really simple, as there’s just one comment style. You use /* at the start of the comment, and */ at the end, like so:

/* This is a comment */
body {
    background-color: #f9f9f9;
}

Easy, right?

And you can put it anywhere you write CSS, such as inside a .css file, in a