CSS comments are not displayed in the browser, however they can help document your source code.
CSS comments are generally written to clarify your code. It is very helpful for the users who reads your code so that they can easily comprehend the code.
Comments are ignored by browsers.
Comments are single or multiple lines statement and written within /…………/ .
CSS_Comments
Comments are used to clarify the code, and may help when you alter the source code at a later date.
Comments are overlooked by browser.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Hello World!
This paragraph is styled with CSS.
CSS comments are not shown in the output.
You can add comments any place you need in the code:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Comments can likewise span different lines:
<!DOCTYPE html>
<html>
<head>
<style>
/* This is
a multi-line
comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
HTML and CSS Comments
From the HTML tutorial, you learned that you can add comments to your HTML source by using the <!–…–> syntax.
In the accompanying example, we use a combination of HTML and CSS_comments:
Example
<!DOCTYPE html>
<html>
<head>
<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>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
