<span class="comment">/* Here&#x27;s a test */</span>
html {
  <span class="comment">/**
   * Images can be full URIs (dragging in another pretty large RFC), which can
   * *optionally* be quoted (why all this unneccessary optional stuff?)
   */</span>
  <span class="variable">background-image</span>: url(<span class="string">&quot;path/to/image.png&quot;</span>) <span class="special">!important;</span>

  <span class="comment">/* You can use named &quot;counters&quot; (what, there are no variables in CSS?!) */</span>
  <span class="variable">content</span>: <span class="string">&quot;Chapter &quot;</span> counter(my-chapter-counter) <span class="string">&quot;. &quot;</span>;
  <span class="variable">counter-increment</span>: my-chapter-counter;      <span class="comment">/* Add 1 to chapter */</span>

  <span class="comment">/**
   * Lists of font names (strings), separated by spaces and possibly quoted.
   * Also, a restricted set of specially-defined &quot;generic font families&quot;
   * like serif, fantasy(WTF) and monospace, and even a set of specially-defined
   * &quot;system fonts&quot; like status-bar, small-caption, icon and menu.
   */</span>
  <span class="variable">font-family</span>: Helvetica, <span class="string">&quot;Comic Sans MS&quot;</span>, fantasy, small-caption;

  <span class="comment">/**
   * Many different size types: em, ex, px, pt, in, cm, mm, percentage, unit-less.
   * In margins and paddings, you can provide 1, 2, 3 or 4 values which determine
   * how they expand into -top, -right, -bottom and -left.
   */</span>
  <span class="variable">margin</span>: 1px 2em 30% 0;
}