Search code examples
htmlcssfontstypography

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


Solution

  • You were close.

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

    Use:

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