Sophia_ES Sophia_ES - 5 months ago 27
CSS Question

How to combine bold and italic in CSS?

This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to

<b&g>this</b>
in old-fashioned HTML) as well as how to make text italic (equivalent to
<i>this</i>
in old-fashioned HTML).

However, I can't seem to find anywhere (and I've both Googled and tried things in the CSS) how to make text have both properties at the same time (equivalent to
<b><i>this</i></b>
in old-fashioned HTML).

Is there a way to do this using pure CSS?

I've tried this:

font-style: italic bold;


The result was that the page ignored both properties, and it was as though I never specified this property at all.

I got the same results when I tried this:

font-style: italic, bold;


On the other hand, I got a different result (but still not what I wanted) when I tried this:

font-style: italic; bold;


This time, what happened is that it used the first style given (italic) but ignored the second (bold).

I'm out of ideas to try -- and I really would prefer to be able to solve this problem with pure CSS. Is there a way to do this?

Answer

You were close.

italic is used for font-style whereas bold is used for font-weight.

Use

font-weight: bold;
font-style: italic;