CSS Comments

Comments are used to explain the code and can help you when you edit the source code at a later date. They are not displayed in the browser and do not affect the execution of your styles.

Comment Syntax

CSS comments are placed inside the <style> element or the external .css file. They begin with /* and end with */.

/* This is a single-line CSS comment */
p {
    color: #2e7d52;
}

Multi-line Comments

You can also create multi-line comments by spanning your text across multiple lines inside the same comment markers.

/*
 This is a multi-line CSS comment.
 It can span as many lines as you want.
 We often use it for documenting complex sections of code.
*/
body {
    background-color: #f1f1f1;
}

Disabling Code

A very common use of comments is to temporarily "turn off" sections of code during testing or debugging, without deleting it forever.

p {
    color: red;
    /* font-size: 20px; */ /* This style is currently disabled */
}

Best Practices

• Use comments to **organize your CSS** into distinct sections (e.g., Header, Footer, Main Content).
• Keep comments **clear and descriptive** so that anyone reading your code can understand your logic.
• Avoid creating too many unnecessary comments for simple, obvious styles.

/* ====================
   BUTTON STYLES
   ==================== */
.btn-primary {
    background-color: blue;
    color: white;
}