<p>This line in YUI's <a href="http://developer.yahoo.com/yui/reset/" rel="nofollow noreferrer">Reset CSS</a> is causing trouble for me:</p>

<pre class="lang-css prettyprint-override"><code>address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}
</code></pre>

<p>It makes my <code>em</code> not italic and my <code>strong</code> not bold. Which is okay. I know how to override that in my own stylesheet.</p>

<pre class="lang-css prettyprint-override"><code>strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}
</code></pre>

<p>The problem comes in when I have text that's both <code>em</code> and <code>strong</code>. </p>

<pre><code>&lt;strong&gt;This is bold, &lt;em&gt;and this is italic, but not bold&lt;/em&gt;&lt;/strong&gt;
</code></pre>

<p>My rule for <code>strong</code> makes it bold, but YUI's rule for <code>em</code> makes it normal again. How do I fix that? </p>

If your strong declaration comes after YUI's yours should override it. You can force it like this:
```
```
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }
```
```
If you still support IE7 you'll need to add
```
!important
```
.
```
```
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }
```
```
This works - see for yourself:
```
```
/*YUI styles*/
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}
/*End YUI styles =*/

strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}
```
```
```
```
<strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>
```
```