Strong and em reset error

Do you have a reset CSS style sheet that resets the styles for strong and em tags? Let's say you do this:

/* reset styles */ strong, em { font-weight:normal; font-style:normal; } /* set styles */ strong { font-weight:bold; } em { font-style:italic; }

An all too common resetting method that could even be seen at yahoo in the YUI Reset CSS style sheet at the time of writing this article. But what happens if we have text such as the following:

<strong>strong text <em>strong text and em</em> ending strong text</strong>

What should happen is that the outter text should be styled with a font-weight bold and the inner text should take on the bold weight and also become italic. If you refer back to our reset styles you will notice that we have reset the font-weight for the em tag. Therefore this will override our strong tag and the middle part of our text will not be styled with bold. This is a problem and can be fixed with the following:

/* reset styles */ strong { font-weight:normal; font-style:inherit; } em { font-weight:inherit; font-style:normal; } /* set styles */ strong { font-weight:bold; } em { font-style:italic; }

But we are now inheriting styles and not resetting. So how about it we combine our reset style sheet and also set our styles at the same time:

/* set styles */ strong { font-weight:bold; font-style:inherit; } em { font-weight:inherit; font-style:italic; }

If you combine your reset and initial style sheets together, you will have a more robust CSS structure that will increase website development and eliminate CSS bugs and missing styles. Think about what works best for you and your clients. Popularity such as the YUI Reset CSS stylesheet is not always the best option.