CSS
HTML
JavaScript
jQuery
PHP
SQL
WordPress
CSS Tutorials

Overview

CSS comments are used for notes in the style blocks, whether inline, in the document head, or an external file. Comments are not displayed in the browser, and are great for making notes within the code for future reference.

A CSS comment begins with /*, followed by a space, then the comment itself, then another space, and closed with */.

				
					/* this is a comment */
				
			

The CSS comment can also wrap to multiple lines and anything between the /* and */ will be ignored by the browser, including any code that you don’t want the browser to run. This is called “commenting out” code.

				
					/* this is a 
a much longer
comment 

#primary {
    color: red;
}
*/
				
			

A Comment in an External Style Sheet

The following is a CSS comment placed in an external style sheet that will be linked to the HTML document. Since the entire document is CSS (the document ends with the .css file extension), the comment can be placed anywhere within the document (after the opening @charset “UTF-8”; line).

				
					/* this is a comment */
#primary {
    color: red; /* this is a comment */
    font-size: 18px;
}
#secondary {
    margin-top: 35px;
} /* this is a comment */
				
			

As mentioned above, CSS comments can also be used to “comment out” a section of code that you’d like to keep intact for future use, but “turn off” for the time being. By wrapping a comment around the code, it will not be implemented by the browser.

The structure of the comment stays the same, but the comment itself is the code you no longer want the browser to run. In the following, the font-size property will not be applied.

				
					#primary {
    color: red;
    /* font-size: 18px; */
}
#secondary {
    margin-top: 35px;
}
				
			

A Comment in a Block of Styles

The following is a block of styles, usually placed in the head of the HTML document. A CSS comment can be placed anywhere between the opening style tag and closing /style tag, but not outside those HTML tags (that would call for an HTML comment) because everything outside the style tags are HTM, not CSS.

				
					<style>
    /* this is a comment */
    #primary {
        color: red; /* this is a comment */
        font-size: 18px;
    }
    #secondary {
        margin-top: 35px;
    } /* this is a comment */
</style>
				
			

And again, we can “comment out” any code we don’t want applied by the browser.

				
					<style>
    #primary {
        color: red;
        /* font-size: 18px; */
    }
    #secondary {
        margin-top: 35px;
    }
</style>
				
			

A Comment in an Inline HTML Style

A CSS comment placed inside the HTML style attribute has the same form and must be located between the opening and closing quotes ” ” containing the style rules.

				
					<p style="color: red; /* this is a comment */">A paragraph with red text.</p>

				
			

And yet again, the comment /* */ can be wrapped around part of the inline style to “comment out” that rule.

				
					<p style="color: red; /* font-size: 16px; */">A paragraph with red text.</p>

				
			

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.

CSS
HTML
JavaScript
jQuery
PHP
SQL
WordPress

Why 1SMARTchicken?

This site was built and is maintained to benefit my autistic son.
See More →

My Son's Name is Johnny

He was diagnosed as autistic quite late, at age four...
His story

Buy Me a Coffee

Thanks for your support!

Feedback

If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.