title: <script> tags changes and locks font size - html, css, javascript
body: <p>When I put a script in my html file, the font changes to default and no styling can be applied:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="test.css" type="text/css" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;ul class="topnav"&gt;
    &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
      function myFunction() { 
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS file looks like this:</p>
  
  <pre><code>ul.topnav li a {
      font-size: 20;      
  }
  </code></pre>
  
  <p>If I take out the script the font size changes to 20.</p>
  
  <p>Why does this happen?</p>