CSS Comments

A comment in CSS is a piece of text written inside the CSS code that the browser completely ignores. Comments are not displayed on the web page — they exist only in the code for the benefit of the developer.

Comments are used to explain what a block of CSS does, leave reminders, mark sections of a large stylesheet, or temporarily disable a style rule during testing.

Comment Syntax

In CSS, a comment starts with /* and ends with */. Everything between these two markers is treated as a comment.

/* This is a CSS comment */

Single-Line Comment

A single-line comment fits on one line. It is useful for brief notes next to a rule.

/* Style for the main heading */
h1 {
    color: darkblue;
    font-size: 30px;
}

Multi-Line Comment

A multi-line comment spans across several lines. It is useful for longer explanations or for marking the start of a section in the stylesheet.

/*
    Navigation Bar Styles
    This section controls the top navigation menu.
    Last updated: March 2025
*/
nav {
    background-color: #222;
    padding: 15px;
}

Inline Comment (After a Property)

A comment can also be placed at the end of a line, after a CSS declaration.

p {
    font-size: 16px;   /* Base font size for body text */
    line-height: 1.6;  /* Improves readability */
    color: #333;       /* Soft black — easier on the eyes than pure black */
}

Using Comments to Disable Code

Sometimes during development, a CSS rule needs to be temporarily turned off without deleting it. Wrapping it in a comment is the easiest way to do this.

p {
    color: green;
    /* font-size: 20px; */
    /* This font-size line is disabled for testing */
}

The font-size property will not be applied because it is inside a comment. To re-enable it, simply remove the /* and */ markers.

Using Comments to Organize Stylesheets

In large projects, stylesheets can contain hundreds of rules. Using comments as section dividers makes navigation much easier.

/* ========================
   GLOBAL STYLES
   ======================== */
* {
    box-sizing: border-box;
}

/* ========================
   HEADER SECTION
   ======================== */
header {
    background-color: #004080;
    color: white;
}

/* ========================
   FOOTER SECTION
   ======================== */
footer {
    background-color: #222;
    color: #ccc;
}

Important Notes About CSS Comments

CSS does not support single-line comments using // (like JavaScript does). Only the /* */ format works in CSS.
Comments cannot be nested. A comment inside another comment will cause errors.
Comments are visible in the source code when someone inspects a page, so avoid writing sensitive information in comments.

Summary

CSS comments are written between /* and */ and are completely ignored by the browser. They are a simple but powerful way to document CSS code, organize large stylesheets, and temporarily disable rules during development. Writing clear comments is a good habit that makes code easier to understand and maintain over time.

Previous lessons

Back to courses

Next lessons