How to Comment in CSS

PDF download Download Article
PDF download Download Article

Using comments while writing CSS code is helpful for both you and anyone else that may work on or learn from the code. You can use comments to explain potentially confusing functions, quickly prevent blocks of code from being run, and create documentation for the code's features and purpose. You don't need to comment for every piece of code that you write, but good commenting can help everyone involved.

1

Familiarize yourself with the CSS comment code.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1e\/706288-1-1.jpg\/v4-460px-706288-1-1.jpg","bigUrl":"\/images\/thumb\/1\/1e\/706288-1-1.jpg\/aid706288-v4-728px-706288-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This allows for multi-line comments, and you can quickly use it to disable portions of your code. [1] 
     /* Everything between the starting and ending tags will be a comment */
    2. Advertisement
2

Use the comment in the CSS sections of your code.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/706288-2-1.jpg\/v4-460px-706288-2-1.jpg","bigUrl":"\/images\/thumb\/e\/e6\/706288-2-1.jpg\/aid706288-v4-728px-706288-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This means they will work in your CSS style page, as well as the <style> block of your HTML page. They will not work on other parts of the HTML page. If you need to comment in a HTML block, use HTML comments . 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 p 
 { 
 color 
 : 
 #93B874 
 ; 
 /*You can create comments at the end of lines */ 
 /* Or you can create comments between lines */ 
 font-family 
 : 
 "times" 
 ; 
 } 
 /* You can create multi-line comments. 
 Everything between the two comment tags will 
 not be processed when displaying the page */ 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 p 
 > 
 This 
 is 
 a 
 standard 
 HTML 
 paragraph 
 . 
 The 
 comments 
 above 
 will 
 not 
 appear 
 on 
 the 
 page 
 . 
 </ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
3

Use comments to prevent code from being run.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/706288-3-1.jpg\/v4-460px-706288-3-1.jpg","bigUrl":"\/images\/thumb\/e\/ef\/706288-3-1.jpg\/aid706288-v4-728px-706288-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This is great for testing changes and debugging code. 
     < 
 style 
 > 
 p 
 { 
 color 
 : 
 #93B874 
 ; 
 /* font-family: "times"; */ 
 } 
 /* The comment tags above will prevent the 
 "font-family" attribute from being applied */ 
 </ 
 style 
 >
    2. Advertisement
4

Use comments to explain potentially confusing code.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/706288-4-2.jpg\/v4-460px-706288-4-2.jpg","bigUrl":"\/images\/thumb\/d\/dd\/706288-4-2.jpg\/aid706288-v4-728px-706288-4-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This not only helps people who may be collaborating or learning from your code, it can also help you remind yourself about the function of the code. 
     < 
 style 
 > 
 img 
 { 
 opacity 
 : 
 0.5 
 ; 
 filter 
 : 
 alpha 
 ( 
 opacity 
 = 
 50 
 ); 
 /* For IE6-8 */ 
 } 
 /* The comment above indicates that the code on 
 that line is for Internet Explorer 6, 7, and 8 */ 
 </ 
 style 
 >
5

Use comments to create documentation within the code.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/38\/706288-5-1.jpg\/v4-460px-706288-5-1.jpg","bigUrl":"\/images\/thumb\/3\/38\/706288-5-1.jpg\/aid706288-v4-728px-706288-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This allows you to explain the function of the program and provide instructions for other coders/users. CSS compression will automatically strip this out when it comes time to run the code, so you don't have to worry about length affecting the size of the file. [2] 
     /*********************************** 
 ************************************ 
 This Makes for a Good Title Header 
 ************************************ 
 ***********************************/ 
 /*========Section Heading=========*/ 
 /*------Sub-Section Heading-------*/ 
 /*This can be the text for each of 
 * for each of your paragraphs. 
 * Adding an * to the beginning of 
 * each line makes it a little easier 
 * for the reader to parse */
    2. Advertisement
6

Use invalid CSS to create temporary single-line comment.

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/706288-6-1.jpg\/v4-460px-706288-6-1.jpg","bigUrl":"\/images\/thumb\/0\/02\/706288-6-1.jpg\/aid706288-v4-728px-706288-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    You can , however, use invalid CSS at the beginning of a line to keep the following function from being processed. This isn't considered good practice for major debugging, but it can be useful in a quick pinch. [3] 
     < 
 style 
 > 
 p 
 { 
 color 
 : 
 #93B874 
 ; 
 XXXXfont-family 
 : 
 "times" 
 ; 
 } 
 /* The "XXXX" above will prevent "font-family" 
 from being processed. Code hacks like this 
 should not be left on a live website, as they 
 could potentially cause problems for the reader */ 
 </ 
 style 
 >

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Insert a Hyperlink Using Rich Text or HTML: 3 Methods
      How to
      Make a Birthday Card with HTML and CSS
      How to
      Create a Simple CSS Stylesheet Using Notepad
      How to
      Use BBCode
      How to
      Upload Images in BBCode
      How to
      Create a Dropdown Menu in HTML and CSS
      Advertisement

      References

      1. ↑ http://www.w3schools.com/css/css_syntax.asp
      2. ↑ https://css-tricks.com/snippets/css/comments-in-css/
      3. ↑ http://www.sitepoint.com/web-foundations/css-comments/

      About This Article

      Article Summary X

      1. Type /* .
      2. Type your comment.
      3. Press Enter or Return .
      4. Type */ .

      Did this summary help you?
      Thanks to all authors for creating a page that has been read 64,058 times.

      Is this article up to date?

      Advertisement