YUI Reset CSS Makes <strong><em>this not work</em></strong>

css, yui

Solution

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>

Problem

This line in YUI's Reset CSS is causing trouble for me: ``` address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; } ``` It makes my `em` not italic and my `strong` not bold. Which is okay. I know how to override that in my own stylesheet. ``` strong, b { font-weight: bold; } em, i { font-style: italic; } ``` The problem comes in when I have text that's both `em` and `strong`. ``` <strong>This is bold, <em>and this is italic, but not bold</em></strong> ``` My rule for `strong` makes it bold, but YUI's rule for `em` makes it normal again. How do I fix that?

Original source