title: html css * {...} : can't change the font-size
body: <p>Seems like I'm stucked.
  Why does the code below display a message of 12px, but not 50px? Isn't class1 have the highe
  How to fix it if <strong>I'm not allowed to change the * properties</strong>? Even !important does not help. </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              *
              {
                  font-size : 12px
              }
  
              .class1
              {
                  font-size : 50px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="class1"&gt;
              &lt;span&gt;why it is not 50px font size?&lt;/span&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>