CSS comments allow developers to add notes, explanations, or temporary code removals within a stylesheet. They improve code readability and help with debugging or collaboration in larger projects.
CSS comments use the /* ... */ format.
✅ Browsers ignore everything inside the comment.
/* This is a single-line comment */
p {
color: blue; /* This is an inline comment */
}
/*
This is a
multi-line comment
*/
h1 {
font-size: 24px;
}
Used to explain one line of code.
/* This sets the text color to red */
h1 {
color: red;
}
Used for long explanations or to separate sections in CSS.
/*
This section styles the navigation bar.
It includes background color, padding, and alignment.
*/
.navbar {
background-color: black;
padding: 10px;
text-align: center;
}
Placed at the end of a CSS rule for quick explanations.
p {
font-size: 18px; /* Sets text size */
color: gray; /* Changes text color */
}
CSS files can be long and complex. Comments help structure the code and make it easier to understand.
/* Header section styles */
header {
background-color: lightblue;
text-align: center;
padding: 20px;
}
/* Footer section styles */
footer {
background-color: black;
color: white;
padding: 15px;
}
If you want to test different styles without deleting the existing code, use comments to disable certain parts.
/* Removing background for testing */
/*
body {
background-color: lightgray;
}
*/
Some CSS techniques might be difficult to understand. Comments can clarify why a style is applied.