CSS – How to Combine Bold and Italic Styles

cssfontshtmltypography

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 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;

I got a different result 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).

Can this be done with pure css?

Best Answer

You were close.

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

Use:

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