Grow your CSS skills. Land your dream job.

Last updated on:

Comments in CSS

body {
    font-size: 62.5%  /* 1em = 10px */
}

The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.

Comments

  1. Permalink to comment#

    Elaborating..

    /*
    * === MAJOR SECTION HEADING ===
    */

    /*
    * — Minor Section Heading —
    */

    I prefer comment to appear this way, but everyone is different how they comment. One this thing is for sure. You can never comment too much! (as they stripped anyhow in css compression).

  2. Anoniem
    Permalink to comment#

    I have two little (newbie) questions:
    1. Are comments still the same in CSS3?
    2. What about comments in html5?

    • MaxArt
      Permalink to comment#

      Yes, of course. CSS3 is CSS.
      You have to include them between . Just like plain old HTML or XML.

    • MaxArt
      Permalink to comment#

      2) Whooops… I meant between <!– and –>.

    • me
      Permalink to comment#

      In SCSS, you can use:
      // comment
      or:
      /Comment
      Still a comment
      still a comment
      /



  3. Thanks “me, I’m working with scss ^^

  4. Permalink to comment#

    How is this Comment Preview possible below this? Is this a plugin in WordPress? So cool.

  5. Emmad
    Permalink to comment#

    I don’t like the fact that you need 4 characters to comment a single instructions on a line! It would have been better to use something simpler in addition to the /* */. For example, SQL uses two consecutive dashes like — which is very easy to use, another one is a single quote at the beginning of the line like VB. Anyway, this is still better than the most silly comment syntax for HTML.

  6. John C
    Permalink to comment#

    I have a followup question to determine if this is style or need.

    I see basic comments in css as described /* comment */.
    Then I see multi line comments having a * before each new line.
    Finally I will see what implies hierarchy as in this example from the normalize.css on github. Link

    Is this simply style and hierarchy or is there necessary syntax for multi line comments:

    /*! normalize.css v2.1.3 | MIT License | git.io/normalize */

    /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */

    /**
    * Correct block display not defined in IE 8/9.
    */

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block;}

    • SubGothius
      Permalink to comment#

      Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.

    • /////////
      RESET /
      /////
      /
      css
      ///////////////////
      TYPOGRAPHY /
      ///////////////
      /
      css
      /**
      TYPO animation /
      css
      /***
      TYPO animation tooltip */
      css { /
      each to their own */; }

  7. Bihari Babu
    Permalink to comment#

    Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.

    • T. Heuser
      Permalink to comment#

      Many coders prefer the // comment // style, However there’s one major advantage to using opening and closing sequences for comments: Since another opening sequence within a comment gets ignored, we have a quick line-based disable for experimental code during development:

      /* width: fit-content; /* unsupported in webkit  */
      

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

*May or may not contain any actual "CSS" or "Tricks".