CSS Comments Explained with Examples

CSS Comments Explained with Examples

CSS Comments – Single Line, Multi-Line & Comment Out Code | TipsInLearning
Home CSS Course CSS Comments
CSS Lesson 2 of 12

CSS Comments

Learn how to write CSS comments — single-line and multi-line — and how to comment out CSS code for testing. Understand when and why developers use comments in their stylesheets.

6 min read
Beginner
CSS Fundamentals
CSS Course
In This Lesson
6 min read Beginner
Progress0/12
Beginners often skip comments entirely because the code "still works" without them. Don't. Come back to your CSS file six months later — or hand it to a teammate — and you'll immediately understand why comments exist. This is a short lesson, but the habit you build here will save you hours later.
What You'll Learn
What CSS comments are and why they exist
The /* */ comment syntax
Single-line comments
Multi-line comments
Commenting out CSS for testing
Organising CSS with section headers

What are CSS Comments?

A CSS comment is text you write inside your CSS code that the browser completely ignores. Comments are only visible to developers reading the source code — they never appear on the webpage and never affect any styling.

If you've already been through the CSS Introduction lesson, you already know that CSS rules have a selector, property, and value. Comments live outside that structure — they're notes you leave in the file. CSS comments serve two main purposes: explaining code and temporarily disabling CSS rules.

Explain Code
Describe what a CSS rule does so you (or teammates) understand it later.
Organise Sections
Divide your stylesheet into clear sections like "Header", "Navigation", "Footer".
Disable Code
Temporarily turn off a CSS rule during testing without permanently deleting it.
Team Collaboration
Help other developers on your team understand your code quickly.

CSS Comment Syntax

CSS uses only one type of comment syntax. A comment starts with /* and ends with */. Everything between these two symbols is ignored by the browser — no matter how long or how many lines it spans.

CSS — Basic Comment Syntax
/* This is a CSS comment — the browser ignores this */

p {
  color: blue;  /* This comment explains the rule */
}

Single-Line Comments

Single-Line CSS Comments

CSS has no dedicated single-line comment syntax (unlike JavaScript which uses //). But you can write a short comment on one line using the same /* */ syntax — just keep it on one line. Place it before a rule or at the end of a declaration line.

CSS — Single-Line Comments
/* Change the background color of the page */
body {
  background-color: lightblue;
}

/* Style for main heading */
h1 {
  color: darkblue;
  text-align: center;  /* centers the heading */
}

/* Single line comment */
p {
  color: red;
}

Multi-Line Comments

Multi-Line CSS Comments

You can write a comment that spans multiple lines — just open with /* and close with */ anywhere. Everything in between, even across many lines, is completely ignored. Multi-line comments are great for longer explanations or file header blocks.

CSS — Multi-Line Comments
/*
  This is a multi-line comment.
  It can span as many lines as needed.
  Great for explaining complex CSS blocks.
  Author: TipsInLearning
  Date: 2026
*/

h1 {
  font-size: 40px;
  color: #7c3aed;
}

Commenting Out CSS Code

One of the most useful things about comments is that you can wrap CSS rules inside a comment to disable them temporarily — without deleting the code. This is very common during development and debugging.

❌ Property is active
p {
  color: blue;
  font-size: 20px;
}
✅ Property commented out
p {
  color: blue;
  /* font-size: 20px; */
}
CSS — Commenting Out Code
/* Disable a single property for testing */
p {
  color: blue;
  /* font-size: 20px; */
}

/* Disable an entire CSS rule block */
/*
h1 {
  color: red;
  font-size: 40px;
}
p {
  color: green;
}
*/

/* This rule is still active */
body {
  background: #f8fafc;
}

Developer tip: Instead of deleting CSS when testing, comment it out first. If removing it breaks something, you can quickly uncomment it to restore it. This saves time during debugging and is a habit all professional developers use.

Organising CSS with Section Comments

In professional CSS files, developers use section header comments to divide the stylesheet into clearly labelled areas. This makes large CSS files much easier to navigate and maintain — especially when working with a team.

CSS — Well-Organised Stylesheet
/* ================================================
   TipsInLearning — Main Stylesheet
   Author: TipsInLearning
   Last Updated: 2026
   ================================================ */

/* ===== RESET & BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== HEADER STYLES ===== */
header {
  background-color: #7c3aed;
  color: white;
  padding: 1rem 2rem;
}

/* ===== NAVIGATION MENU ===== */
nav {
  display: flex;
  gap: 20px;
}

/* ===== MAIN CONTENT ===== */
main {
  padding: 2rem;
  max-width: 1200px;
}

/* ===== FOOTER ===== */
footer {
  background: #0f172a;
  color: white;
  text-align: center;
}

Rules & Common Mistakes

These rules about CSS comments are essential — getting them wrong will silently break your stylesheet:

Always Use /* */ in CSS

CSS has only one comment syntax. A comment opens with /* and must close with */. You can place comments anywhere in your stylesheet — before rules, inside rule blocks, or at the end of lines.

Common Mistake — Using // in CSS:
// This is wrong in CSS — this syntax does NOT work in CSS. It only works in JavaScript. If you use // in a CSS file, the browser won't treat it as a comment and it will break your CSS rule.
CSS — Right vs Wrong Comments
/* ✅ CORRECT — always use this in CSS */
p {
  color: blue;  /* this works perfectly */
}

/* ❌ WRONG — double slash does NOT work in CSS */
p {
  color: blue;  // this BREAKS your CSS — use /* */ instead
}

Comments work alongside the rest of your CSS knowledge. These lessons from the course connect directly with what you've just learned:

Continue Learning — Apply Comments in These Lessons
CSS Introduction — selector, property, value How to Add CSS — internal & external CSS CSS Colors — comment color choices CSS Box Model — comment layout sections CSS Flexbox — document complex layouts CSS Fonts — annotate typography choices

Try It Yourself

Challenge — Add Comments to a Stylesheet
1Create a CSS file and add a file header comment with your name and the date at the top
2Add a section header comment before each CSS rule block — e.g. /* ===== Body Styles ===== */
3Add a multi-line comment explaining what a complex CSS rule does
4Add an inline comment at the end of a CSS line explaining a specific value
5Comment out one of your CSS rules using /* */ and verify it's disabled in the browser
Lesson Summary
/*CSS comments use /* */ syntax — always start with /* and end with */
👁Browsers completely ignore comments — they never affect the page design
↔Comments can span one line or multiple lines — same /* */ syntax for both
🔕Comment out CSS to disable rules temporarily during testing without deleting
📋Use section header comments to organise large stylesheets into clear regions
❌// does NOT work in CSS — only in JavaScript. Always use /* */

Questions About CSS Comments

The questions beginners most often ask when learning CSS comments:

How do you write a comment in CSS?
CSS comments use the /* */ syntax. Start with /* and end with */. Everything between these two markers is completely ignored by the browser. For example: /* This is a CSS comment */. This syntax works for both single-line and multi-line comments.
Can you use // for comments in CSS?
No. The // double slash syntax does not work in CSS — it only works in JavaScript. If you write // in a CSS file, it will not be treated as a comment and will break your CSS rule. Always use /* */ in CSS files.
What is the difference between single-line and multi-line CSS comments?
Both use the exact same /* */ syntax in CSS. A single-line comment keeps the opening /* and closing */ on the same line. A multi-line comment opens with /* on one line and closes with */ on a later line, with any amount of text in between — the browser ignores all of it.
How do you comment out CSS code?
Wrap the CSS you want to disable inside /* and */. To disable a single property: /* color: red; */. To disable an entire rule block, wrap the whole block in /* and */. The browser ignores everything inside the markers without permanently deleting the code — you can uncomment it anytime.
Do CSS comments affect page performance?
CSS comments have a negligible effect on performance in development. In production, most teams use CSS minifiers that automatically strip all comments and whitespace before deployment, reducing file size. During development, comments are valuable and should not be avoided for performance reasons — minify at build time instead.
Should I use CSS comments in production code?
Write comments freely in your development CSS for readability and team collaboration. Before deploying to production, use a CSS minifier or build tool (like webpack, Vite, or a simple online minifier) to automatically remove all comments and whitespace. This keeps your development code readable while keeping production files small and fast.

Post a Comment