How to restyle em tag to be bold instead of italic

Question

I want to make the text within an <em> tag bold instead of italic. Is there a way to achieve this with CSS?

Answer 1

Sure, use following CSS code:

em {
   font-weight: bold;
   font-style: normal;
}

Answer 2

You can add the following to your css

em { font-style: normal; font-weight: bold; }

you could also create a class to be used on specific em tags

CSS: .non-italic{ font-style: normal; font-weight: bold; }
HTML: <em class="non-italic"></em>

or you can change a specific em tag (not good practice)

<em style="font-style:normal; font-weight:bold;"></em>

Answer 3

Set font-style to normal to force the <em> to always be non-ital or inherit to inherit the setting from the parent (demo):

<div class="normal">
    <h1><code>font-style:normal;</code> <small>- Always non-ital</small></h1>
    <p>Should not be ital: <em>Foo</em></p>
    <p class="ital">Should be ital: <em>Foo</em></p>
</div>
<div class="inherit">
    <h1><code>font-style:inherit;</code> <small>- Inherits from parent</small></h1>
    <p>Should not be ital: <em>Foo</em></p>
    <p class="ital">Should be ital: <em>Foo</em></p>
</div>

.normal em {
    font-weight:bold;
    font-style:normal;
}
.inherit em {
    font-weight:bold;
    font-style:inherit;
}
.ital {
    font-style:italic;
}