CSS Comments
CSS comments are notes in your stylesheet that the browser ignores, useful for explaining rules or temporarily disabling them.
Writing a comment
A CSS comment opens with a slash and a star and closes with a star and a slash. Anything between the two markers is skipped by the browser. Comments can sit on their own line, follow a declaration, or stretch across many lines.
Comment styles
<!DOCTYPE html>
<html>
<head>
<style>
/* Header styles */
h1 {
color: navy; /* brand color */
}
</style>
</head>
<body>
<h1>Page Title</h1>
</body>
</html>Multi-line comments
Unlike some languages, CSS has only this one comment form, and it works across several lines just as well as one. That makes it handy for section banners at the top of a stylesheet.
A section banner
<!DOCTYPE html>
<html>
<head>
<style>
/*
Layout
Controls the page container and grid.
*/
.container {
max-width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<p>Page content goes here.</p>
</div>
</body>
</html>Common uses
- Labeling sections so a long stylesheet is easy to scan
- Explaining why an unusual value was chosen
- Temporarily turning off a rule while testing
- Leaving reminders for yourself or teammates
Comments are stripped out when a stylesheet is minified for production, so they add no weight to the final file your visitors download.
Exercise: CSS Comments
What is the correct syntax for writing a comment in a CSS file?
