Visit Original Non-AMP Page

Commenting in CSS – How to Add Comments in CSS

If you are wondering about Commenting in CSS, how to add comments, where to add Comments and Why we add Comments in CSS.
Then you have come to the Right Place. Because in this Tutorial we will cover everything like: Adding Comments, Single- and Double-line comments and much more.

Introduction: Comments in CSS

A comment is a Programmer Readable explanation or annotation in the source code of CSS. Comments are added CSS for making the CSS code easier for users to understand and are generally ignored by Browsers.

By using CSS Comments, we can add Some Texts as our CSS Code Guide.
As shown in the Example:

Commenting in CSS Example:

body
{
  background-color:gray; //this will add Gray Background
  color:red; //this will add Black Color to Text
}

CSS Comments Syntax

In Simple language, The CSS Comment Syntax show us how to write Comments in CSS in a Proper and Correct way.

CSS Comment Syntax : Example

// Single Line Comment here

/* 
  Multi Line
  Comments Here
*/

FAQ : About Commenting in CSS

How do i comment in css

To Add Comments in CSS we have to write / Define our Comment data after these // Slashes (If we are adding a Single line Comment) or between these /* */ (if we are adding Multi Line CSS Comment).

Example: How do I comment in CSS

body{
color:red; //text Color is RED
margin: 10px;
/*
Body margin 
is set to
10PX
*/
}

Comments in html and CSS

The Process of Adding Comments in HTML and CSS is slightly different but work exactly the Same.
To add Comments in HTML, we need to write our Comment Data Between these HTML Comment Tags <!– –>.
To Add Comments in CSS we have to write / Define our Comment data after these // Slashes (If we are adding a Single line Comment) or between these
/* */ (if we are adding Multi Line CSS Comment).

Comments in HTML and CSS

<html>
 <head>
  <title>Helow</title> 
  
  <!-- MyPage Title is HELLOW -->

  <style>
    // CSS Single Line Comment
    /* 
       CSS multi line
       comment
    */
  </style>
 </head>
</html>

CSS border

For customizing HTML Element’s Border, we can use CSS Border Property. Where we need to assign 3 parameters.
First Parameter: Border Size,
Second Parameter: Border Type
And the Last Parameter: Border Color.

border: size type color;

CSS Border : Example

body
{
 border: 10px solid red;
}

CSS background image

To add Background Image to HTML Document we can use CSS Background Property.
Where we need to give our Image path inside CSS background’s url Property.

background: url(imagePathHere);

CSS Background Image Example:

body
{
 background: url(myImage.jpg);
}

Javascript comment

The method of Adding Comments in JavaScript is Exactly same as Adding Comments in CSS.
To Add Comments in JavaScript we have to write / Define our Comment data after these // Slashes (If we are adding a Single line Comment) or Between these /* */ (if we are adding Multi Line CSS Comment)

// single line Comment

/*
Multi Line
Comment
*/

alert("Hellow"); //Hellow Alert in JS
/*
This Alert will Pop Up
on Page Load
*/

CSS comment box

We can’t add comment box using CSS. But we can Add or Create Comment box using HTML.
To do that we need to add a Comment Writing Section and a Comment Submit Button. Which we will add through HTML INPUT Tags.

<html>
<body>
  <input type="textarea"/><br/>
  <input type="submit" value="Submit Comment"/>
</body>
</html>