CSS Comments

Learn how to write comments in CSS and understand why comments are useful in a stylesheet.

What is a CSS Comment?

A CSS comment is text written inside a stylesheet for developers to explain or document the code.

The browser does not apply CSS rules written inside a comment.

CSS Comment Diagram

CSS Comment Syntax

/* This is a CSS comment */

CSS comments start with /* and end with */.

Example 1: Single-Line Comment

Code

/* Change heading color */

h1 {
    color: blue;
}

Simple Explanation

The first line is a comment. The browser ignores the comment and applies the color: blue; rule to the heading.

Example 2: Comment Between CSS Rules

Code

h1 {
    color: blue;
}

/* Paragraph styling */

p {
    color: green;
    font-size: 18px;
}

Simple Explanation

Comments can be placed between different CSS rules to explain what each section of the stylesheet does.

Example 3: Temporarily Disable CSS

Code

h1 {
    color: blue;

    /* font-size: 40px; */
}

Simple Explanation

The font-size rule is inside a comment, so the browser ignores it.

This is useful when you want to temporarily disable a CSS property without deleting the code.

Multi-Line CSS Comment

Code

/*
    Website Header Styles

    These styles control
    the main website header.
*/

header {
    background-color: black;
    color: white;
}

Simple Explanation

CSS uses the same /* */ syntax for both short and multi-line comments.

Why Use CSS Comments?

• To explain CSS code.
• To organize large stylesheets.
• To make code easier to understand.
• To temporarily disable CSS properties.