title: CSS color property not working correctly on @media print
body: <p>I'm building a web app which basically consists of a large form which can then be printed after submission.</p>
  
  <p>However, the text on my print document seems to never be affected by both <code>color</code> and <code>font-weight</code> CSS properties.</p>
  
  <p>Here is a small section of the document as it looks like on screen:</p>
  
  <p><a href="https://i.stack.imgur.com/WyWOM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WyWOM.png" alt="enter image description here"></a></p>
  
  <p>However, when printing, it ends up looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/smkGK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/smkGK.png" alt="enter image description here"></a></p>
  
  <p>The font is the same but for some reason no styles are applied to it. I have NO overriding CSS settings for <code>@media print</code>, so shouldn't it just look exactly the same?</p>
  
  <p>Why aren't my normal styles being applied to the print document (by print document I mean the document that appears when you click your browser's Print button)?</p>
  
  <p><strong>EDIT:</strong> Posting some example code to illustrate my problem, as requested:</p>
  
  <pre><code>@media print {
  
      html {
          margin: 0;
          padding: 0;
          width: 100%;
          font-size: 0.9em;
          color: yellow !important;
      }
  }
  </code></pre>
  
  <p>In the above snippet, every attribute will work correctly <em>except</em> color, even when using the <code>!important</code> tag. I am at a loss as to why this is happening.</p>