<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>

[{'answer_id': 20118, 'author': 'palmsey', 'author_id': 521, 'author_profile': 'https://Stackoverflow.com/users/521', 'pm_score': 5, 'selected': True, 'text': '<p>If your strong declaration comes after YUI\'s yours should override it. You can force it like this:</p>\n\n<pre><code>strong, b, strong *, b * { font-weight: bold; }\nem, i, em *, i * { font-style: italic; }\n</code></pre>\n\n<p>If you still support IE7 you\'ll need to add <code>!important</code>.</p>\n\n<pre><code>strong, b, strong *, b * { font-weight: bold !important; }\nem, i, em *, i * { font-style: italic !important; }\n</code></pre>\n\n<p>This works - see for yourself:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>/*YUI styles*/\r\naddress,caption,cite,code,dfn,em,strong,th,var {\r\n  font-style: normal;\r\n  font-weight: normal;\r\n}\r\n/*End YUI styles =*/\r\n\r\nstrong, b, strong *, b * {\r\n  font-weight: bold;\r\n}\r\n\r\nem, i, em *, i * {\r\n  font-style: italic;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;strong&gt;Bold&lt;/strong&gt; - &lt;em&gt;Italic&lt;/em&gt; - &lt;strong&gt;Bold and &lt;em&gt;Italic&lt;/em&gt;&lt;/strong&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 20120, 'author': 'sparkes', 'author_id': 269, 'author_profile': 'https://Stackoverflow.com/users/269', 'pm_score': 2, 'selected': False, 'text': "<p>As long as your styles are loaded after the reset ones they should work.  What browser is this? because I work in a similar way myself and I've not hit this problem I wonder if it's something in my testing at fault.</p>\n"}, {'answer_id': 20138, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 3, 'selected': False, 'text': '<p>I would use this rule to override the YUI reset:</p>\n\n<pre class="lang-css prettyprint-override"><code>strong, b, strong *, b *\n{\n  font-weight: bold;\n}\n\nem, i, em *, i *\n{\n  font-style: italic;\n}\n</code></pre>\n'}, {'answer_id': 20145, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 3, 'selected': False, 'text': '<p>If in addition to using YUI reset.css, you also use YUI base.css, then you will be all set with a standard set of cross browser base styles.</p>\n\n<p>LINK: <a href="http://developer.yahoo.com/yui/base/" rel="nofollow noreferrer">http://developer.yahoo.com/yui/base/</a></p>\n'}, {'answer_id': 20162, 'author': 'alexp206', 'author_id': 666, 'author_profile': 'https://Stackoverflow.com/users/666', 'pm_score': 2, 'selected': False, 'text': '<p>I had a similar problem when I added the YUI Reset to the top of my stock CSS file.  I found that the best thing for me was to simply remove all of the</p>\n\n<pre><code>font-weight: normal;\n</code></pre>\n\n<p>declarations from the YUI Reset. I haven\'t noticed that this has affected anything "cross-browser."</p>\n\n<p>All my declarations were after the YUI Reset so I\'m not sure why they weren\'t taking affect.</p>\n'}, {'answer_id': 20186, 'author': 'Chris Marasti-Georg', 'author_id': 96, 'author_profile': 'https://Stackoverflow.com/users/96', 'pm_score': 2, 'selected': False, 'text': "<p>Reset stylesheets are best used as a base.  If you don't want to reset em or strong, remove them from the stylesheet.</p>\n"}, {'answer_id': 20208, 'author': 'Kevin', 'author_id': 40, 'author_profile': 'https://Stackoverflow.com/users/40', 'pm_score': 2, 'selected': False, 'text': "<p>As Chris said, you don't have to use the exact CSS they provide religiously.  I would just save a copy to your server, and edit to your needs.  </p>\n"}, {'answer_id': 20265, 'author': 'Patrick McElhaney', 'author_id': 437, 'author_profile': 'https://Stackoverflow.com/users/437', 'pm_score': 0, 'selected': False, 'text': '<p>I thought I had an ideal solution:</p>\n\n<pre><code>strong, b \n{\n  font-weight: bold;\n  font-style: inherit;\n}\n\nem, i \n{\n  font-style: italic;\n  font-weight: inherit;\n}\n</code></pre>\n\n<p>Unfortunately, Internet Explorer doesn\'t support "inherit." :-(</p>\n'}, {'answer_id': 20332, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': 1, 'selected': False, 'text': '<p>I would suggest avoiding anything which involves hacking the YUI files. You need to be able to update external libraries in the future and if your site relies on edited versions there is a good chance it will get cocked up. I think this is general good practice for any 3rd party library you use.</p>\n\n<p>So I thought <a href="https://stackoverflow.com/questions/20107/yui-reset-css-makes-strong-and-em-not-work#20145">this</a> answer was amongst the better ones</p>\n\n<blockquote>\n  <blockquote>\n    <p>If in addition to using YUI reset.css, you also use YUI base.css, then you will be all set with a standard set of cross browser base styles.</p>\n  </blockquote>\n</blockquote>\n'}, {'answer_id': 20723, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 0, 'selected': False, 'text': '<p>I see what you are saying. I guess you can add a CSS rule like this:</p>\n\n<pre><code>strong em { font-weight: bold; }\n</code></pre>\n\n<p>or:</p>\n\n<pre><code>strong * { font-weight: bold; }\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/20107', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/437/']