CSS Comments

CSS Comments

CSS comments are used to explain CSS code, add notes, or temporarily disable CSS declarations. Comments help developers understand their code and make stylesheets easier to maintain.

CSS comments are ignored by the browser and do not affect the appearance of a webpage.

1. CSS Comment Syntax

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

Syntax:

/* This is a CSS comment */

Example:

/* This comment explains the heading style */

h1 {
    color: blue;
}

The browser ignores the comment and applies the CSS rule to the heading.

2. Single-Line CSS Comments

A single-line CSS comment is written on one line using /* */.

Example:

/* Change heading color */

h1 {
    color: red;
}

You can also write comments on the same line as CSS declarations.

h1 {
    color: blue; /* Heading text color */
}

3. Multi-Line CSS Comments

Multi-line comments are used when you need to write longer explanations across multiple lines.

Example:

/*
    This stylesheet contains
    the main website styles.
    It is used for headings
    and paragraphs.
*/

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

Everything between /* and */ is treated as a comment.

4. CSS Comments to Disable Code

You can use CSS comments to temporarily disable a CSS declaration or rule without deleting it.

Example:

h1 {
    color: blue;
    /* font-size: 40px; */
    text-align: center;
}

In this example, the font-size declaration is commented out, so the browser does not apply it.

You can also disable an entire CSS rule:

/*
p {
    color: red;
    font-size: 20px;
}
*/

5. CSS Comments for Code Organization

Comments can help organize a large CSS stylesheet into meaningful sections.

Example:

/* ===== Header Styles ===== */

header {
    background-color: black;
    color: white;
    padding: 20px;
}

/* ===== Navigation Styles ===== */

nav {
    background-color: gray;
    padding: 10px;
}

/* ===== Footer Styles ===== */

footer {
    background-color: black;
    color: white;
    text-align: center;
}

This makes the stylesheet easier to read and maintain.

6. CSS Comments in External Stylesheets

CSS comments can be written in external CSS files, internal stylesheets, and CSS code inside HTML style attributes? No. CSS comments are supported in stylesheet code, but the style attribute only accepts CSS declarations and does not support CSS comments as a standalone comment structure.

Example in style.css:

/* Main website stylesheet */

body {
    font-family: Arial, sans-serif;
    background-color: lightgray;
}

/* Main heading */

h1 {
    color: blue;
    text-align: center;
}

7. Advantages of CSS Comments

• Make CSS code easier to understand.
• Explain complex styling rules.
• Help organize large stylesheets.
• Allow developers to temporarily disable CSS code.
• Improve code maintenance and collaboration.

CSS Comments Summary

Conclusion

CSS comments are useful for documenting, organizing, and temporarily disabling CSS code. They improve readability and make stylesheets easier to maintain.

Practice Tasks

1. Write a single-line CSS comment.
2. Create a multi-line comment explaining a CSS rule.
3. Use a comment to disable a font-size declaration.
4. Add section comments for header, main content, and footer styles.
5. Write comments inside an external CSS stylesheet.