CSS Comments

CSS comments are used to add explanatory notes or disable parts of the CSS code temporarily. They are ignored by the browser and do not affect how the CSS is rendered. Here’s how you can use comments in CSS:

Syntax:

CSS comments start with /* and end with */. Any text between these symbols is considered a comment and will not be processed by the browser.

Single-Line Comment

You can use a single-line comment to explain a single line of CSS code.

/* This is a single-line comment */
p {
    color: blue; /* This comment is on the same line as the property */
}

Multi-Line Comment

You can use a multi-line comment to explain a block of CSS code or to provide more detailed explanations.

/*
  This is a multi-line comment.
  Author: John
*/
body {
    background-color: Gray; /* This comment is on the same line as the property */
}

Disabling Code with Comments

Comments can also be used to temporarily disable a section of code. This is useful for debugging.

/*
p {
    color: red;
}
*/

h1 {
    color: green;
}

Why we use comments?

Explain Complex Code: Use comments to explain complex or non-intuitive sections of your CSS.

Consistency: Maintain a consistent style for comments throughout your CSS files.

Avoid Overuse: While comments are helpful, overusing them can make your CSS harder to read. Use them judiciously.

Keep Comments Updated: Ensure that comments remain accurate as you update your CSS.

Example

Here’s an example demonstrating various uses of comments in CSS:

/* Main layout styles */
body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: Arial, sans-serif; /* Set default font */
}

/* Header styles */
header {
    background-color: #333; /* Dark background for header */
    color: #fff; /* White text color */
    text-align: center; /* Center align text */
    padding: 1em 0; /* Vertical padding */
}

/* Main content styles */
.main-content {
    padding: 20px; /* Add padding around content */
}

/*
.highlight {
    background-color: yellow; 
    This block is currently disabled 
}
*/

footer {
    text-align: center; /* Center align footer text */
    font-size: 0.8em; /* Smaller text for footer */
    color: #999; /* Gray text color */
}