2

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

0b10011
  • 18,397
  • 4
  • 65
  • 86
user3861559
  • 973
  • 8
  • 25
  • 43

3 Answers3

9

Sure, use following CSS code:

em {
   font-weight: bold;
   font-style: normal;
}
Kamil
  • 1,987
  • 16
  • 14
  • 2
    Who knows. Could be anything - someone doing strategic downvoting to push their answer up; someone didn't think the answer was useful enough; someone who really likes orange upside-down triangles and wants to see more? – Krease Aug 27 '14 at 20:09
4

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>
bobbyg603
  • 3,536
  • 2
  • 19
  • 30
  • 1
    I want to mention that CSS inline style is not best practice. You should separate content and design (except small css snippets which could be placed in the head tag) when ever possible. So give the specific em tag a class and refer to it through the class selector. – Steven Web Aug 27 '14 at 20:15
1

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;
}
0b10011
  • 18,397
  • 4
  • 65
  • 86