title: Have <em> tag produce non-italicized text in an italic context
body: <p>I have styled the <code>h4</code> tag to use an italic font styling <code>font-style: italic;</code>.  Works fine. </p>
  
  <p>Within a header, I would like to sometimes emphasize words using the <code>em</code> tag.</p>
  
  <p>When this happens, I'd like the emphasized words to be rendered in a non-italicized font to distinguish them from the surrounding text.</p>
  
  <p>What are my options?</p>
  
  <p>To be clear, when using <code>em</code> outside of <code>h4</code> headers (with non-italicized text), it should italicize the text. </p>
  
  <p>Only when the surrounding text is italicized do I want <code>em</code> to behave differently.  I'd strongly prefer to do this using just HTML and global CSS properties.</p>
  
  <p>The basic philosophy is this:  <code>em</code> should call attention to text by making it different from the text around it. I don't know how to do this in a way that's sensitive to the context of the surrounding text.  </p>
  
  <p>I'm wondering if there's a straightforward way to do so.</p>