CSS Comments

CSS comments are used to add notes or explanations to your CSS code. They are not displayed on the web page and do not affect the styling or performance of the page. Comments are particularly useful for documenting your code, making it easier to understand and maintain.

Syntax for CSS Comments

CSS comments are written using the following syntax:

/* This is a single-line comment */

/* 
   This is a multi-line comment 
   It spans multiple lines 
*/

        

Examples and Best Practices

Single-Line Comment:

Use this type of comment for brief notes or explanations.

/* Main container styling */
.container {
    width: 100%;
    margin: 0 auto;
}

        

Multi-Line Comment:

Useful for longer explanations or grouping sections of code.

/* 
   Header Styles
   This section includes styles for the header, including the logo and navigation.
*/
.header {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

        

Section Comments:

Organize your CSS file into sections with comments.

/* Reset Styles */
body, h1, p {
    margin: 0;
    padding: 0;
}

/* Layout */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Typography */
h1 {
    font-size: 2rem;
    color: #333;
}

        

TODO Comments:

Indicate sections of the code that need further development or review.

/* TODO: Add responsiveness for small screens */
@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

        

Commenting Out Code:

Temporarily disable parts of your CSS for testing or debugging.

/* 
.deprecated-class {
    color: red;
}
*/