CSS Comments

How to write comments in css – CSS Comments | What You Need to Know About Comments in CSS | How to Work with it?

by

How to write comments in css: Comments can assist you to explain and organize your CSS and manage which parts of your stylesheet get used on the front end. Discover how to add them to your code along with the definition, syntax and sample code on CSS Comments.

This Tutorial of CSS Comments includes the following:

Comments in CSS

CSS comments one line: A CSS comment is applied to attach explanatory notes to the code or to stop the browser from interpreting specific parts of the style sheet. By design, comments do not affect the layout of a document.

However, CSS is missing the “line comment” syntax that those languages have, where everything from // to the end of the line is commented out.

Syntax for CSS Comments

Comments can be located wherever white space is provided within a style sheet. They can be utilized on a single line, or traverse multiple lines.

/* Comment */

Example of Comments in Cascading Style Sheet (CSS)

/* A one-line comment */

/*
A comment
which stretches
over several
lines
*/

/* The comment below is used to
   disable specific styling */
/*
span {
  color: blue;
  font-size: 1.5em;
}
*/

Also Refer:

How to work with comments in CSS?

Comments are utilized to explain the code and may improve when you edit the source code at a later date.

Comments are neglected by browsers. A CSS comment is located inside the<style>element, and begins with /* and ends with */:

/* This is a single-line comment */
p {
  color: blue;
}
/* This is
a multi-line
comment */

p {
  color: blue;
}

HTML and CSS Comments

From the HTML tutorial, you studied that you can add comments to your HTML source by using the <!--...-->syntax.

In the below example, we use a mixture of HTML and CSS comments:

<!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>CSS comments are not shown in the output.</p>

</body>
</html>

Output:

My Heading

Hello World!

This paragraph is styled with CSS.

HTML and CSS comments are not shown in the output.