css comment ,comment out css, css comment tag, comment in css file, comment css code, comment box in html and css, css single line comment, css comment line,

web development

Friday 26 March 2021

Hacker

web development

CSS comment

❮❮ Previous Next ❯❯

In the web page CSS comments are not displayed on the web browser, but they can help document to edit your source code.

CSS Comment

A CSS comments are used to add explanatory notes to the source code or to prevent the browser from interpreting specific parts of the CSS style sheet. By design, comments have no effect, the layout of a document.

CSS comment

Comments is use to explain the Source code, and may helps when we edit the source code at a later Time.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

CSS comment syntax :

CSS Comments can be placed wherever white space is allowed within a CSS style sheet. CSS comment can be used on a single line, or traverse multiple lines.

/* Comment */

CSS comment Example :

Example

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

Try it Yourself »

We can add comments wherever you want in the code :

Example

p {
  color: green;  /* Set text color to green */
}

Try it Yourself »

Note : The /* */ comment syntax is used for both single and multiline comments. There is no another way to specify comments in CSS external style sheets.

However, when using the <style> element, you may use  to hide CSS from older browsers, although this is not recommended. As with the most programming languages that use ( /* */ ) comment syntax, comments can't be nested. In other term, the first instance of */ that follows an instance of /* closes the CSS comment.

HTML and CSS Comments

From the HTML tutorial, you learned that you can add comments to your HTML source by using the  syntax.

Let's understood it, by using a combination of HTML and CSS comments:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: green; /* Set text color to green */
}
</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>