Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 909
Sophia_ES Avatar asked Jul 05 '16 14:07

Sophia_ES


People also ask

How do you italicize style in CSS?

Use the <em> tag. The “em” in <em> literally stands for emphasis. Browsers will, by default, make italicize text that is wrapped in HTML <em> tags.

How do you add bold in CSS?

To define bold text in a CSS rule:Type the property name font-weight, followed by a colon (:).

How do you make cursive text in CSS?

Go under the "fonts" section at the top of the homepage, and there are different categories that you can choose from. "Cursive" is the one you want, I believe.


2 Answers

You were close.

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

Use:

font-weight: bold; font-style: italic; 
like image 84
Richard Hamilton Avatar answered Sep 20 '22 19:09

Richard Hamilton


font-style is a single-value property. bold is font-weight, anyway. To combine multiple values, you can use the shorthand font property. However, the font shorthand has required entries: font-size and font-family. If you don't include both of these in the shorthand, the property will be ignored.

Include these in your font shorthand along with italic bold and it should work.

like image 40
TylerH Avatar answered Sep 21 '22 19:09

TylerH