title: Why can I not define color property for a div
body: <p>This HTML is for a page in a mobile app, so all of the CSS styles have to be defined inline. I have a section of the page that I want to have a dark background and white text, but somehow the text is being rendered as black and I don't know why. What do I need to do to define the color property for a div? Every color:#FFFFFF definition is being ignored, in spite of the !important tag. Here is a scaled down version of the page:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test file (1)&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
  &lt;style&gt;
  body{background-color:#FFFFFF;}
  p, blockquote, pre, ol, ul, li {color:#000000;}
  h1, h2, h3 {color:#0a3454;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="page" style="margin:0;padding:0;width:100%;"&gt;
  &lt;div class="section-wrap" style="position:relative;top:-8px;left:-8px;right:-8px;margin:auto;width:104%;padding: 0;"&gt;
      &lt;section style="background-color: #0a3454;"&gt;
          &lt;div style="color: #FFFFFF;"&gt;
            &lt;div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important; ul{color:#FFFFFF;} li{color:#FFFFFF !important;}"&gt;
              &lt;strong&gt;&lt;ul style="color:#FFFFFF !important;"&gt;
                  &lt;li&gt;This text is supposed to be white but instead is black because of the initial style definition.&lt;/li&gt;
                  &lt;li&gt;Does anyone know why?&lt;/li&gt;
              &lt;/ul&gt;&lt;/strong&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>