title: CSS treating 'root' differently in external .css file
body: <p>I'm pretty new to CSS and have found a nuance that I don't understand.
  I'm trying to set the viewport background color, and using the color red in this example.</p>
  
  <p>If I use the following code in an external .css file then add it to my html file in the 'head' section, the viewport color is NOT changing at all -- it is the standard white background:</p>
  
  <pre><code> ==== my-external-css-file.css ===
   root 
  { 
     display: block;
     background-color:RGB(255,0,0);     
  }
  
  
  ==== my index.html file ====
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;theRed&lt;/title&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width"/&gt;
  
     &lt;link rel="stylesheet" href="my-external-css-file.css"
  &lt;/head&gt;
  </code></pre>
  
  <p>I am learning CSS using a book and the book uses the external .CSS file approach that does not work.  So I took upon myself to abandon the external CSS file and put the root's color change <em>directly</em> in the "head" section of my index.html file -- if I instead put the root color I want <strong>directly inside</strong> index.html, the entire viewport background is red as expected:</p>
  
  <pre><code>     ==== my index.html file ====
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;theRed&lt;/title&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width"/&gt;
  
      &lt;style type="text/css"&gt; 
          :root
          {
              background-color:RGB(255,0,0);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Since both times I'm setting the root's "background-color" to red, and in both cases I'm doing so in the correct part of the html file, in the "head" section -- why is the external .css file's attempt to set the background color NOT working?  </p>
  
  <p>I'm new to CSS so I'm thinking there is some nuance here I'm not aware of?   I'm using Netbeans for my development IDE and when I create a new .CSS file, Netbeans is automatically putting the "display: block" statement in the new .css file so I assumed it was needed and left that alone.</p>