CSS Comments
Comments explain your CSS code and help when you edit it later.
They are also handy for turning off parts of your CSS for a while.
Browsers ignore comments, so they never show up on the page.
A CSS comment goes inside the <style> element. It starts with /* and ends with */.
Single-line comment
A comment on its own line above a rule.
<style> block, put a comment like /* This is a single-line comment */ above a rule that makes paragraphs red. Add a paragraph in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
Comment after a declaration
You can add a comment anywhere, such as after a declaration.
<style> block, write a rule making paragraphs red, with a comment such as /* Set text color to red */ after the color declaration. Add a paragraph in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
Comment in the middle of a line
A comment can sit in the middle of a line. Here red is commented out, so the text is blue.
<style> block, write a paragraph color rule like color: /red/blue; so the commented-out value is ignored and the text is blue. Add a paragraph in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: /*red*/blue;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is blue, because red is commented out.</p>
</body>
</html>
Multi-line comment
A comment can also span several lines.
<style> block, put a comment that spans several lines (using /* ... */) above a rule that makes paragraphs red. Add a paragraph in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* This is
a multi-line
comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World! This paragraph is red.</p>
</body>
</html>
HTML and CSS Comments
From the HTML tutorial you learned that you can add HTML comments with the <!-- ... --> syntax.
This example uses both an HTML comment and a CSS comment together. Neither one appears in the output.
Example
An HTML comment marks the paragraphs, and a CSS comment explains the color rule.
<style> block with a CSS comment after a rule making paragraphs red. In the body, add a heading, an HTML comment using the syntax, and a few paragraphs. Neither comment should appear in the rendered output.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>
</body>
</html>