By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

How to make Italic text with CSS

Making your text italic with CSS is easily done with a couple of CSS rules.

Edited: 2012-12-25 21:46

Italic text have traditionally been done using the i element of HTML, this element is not said to carry any semantic meaning – unlike the em element – which also makes text italic trough its default styling – but yet, search engine might still pick up i as if you had used em.

Changing text style to italic for an element, will not carry any semantic meaning. So if you want your italicization to carry any meaning or weight with search engines, you should consider using the correct elements, rather than just italicizing whatever HTML elements you are using.

Generally, do not use em or strong inside heading elements, they are already considered as important as they can be. Never include a heading element inside a inline element such as strong or em.

Use css italicize to make text stand out in your designs. You should be careful not to italicize or bolden to much, as it tend to clutter your text, making it harder to read rather then easier. The idea is mainly to make text easier to read.

CSS Italic Text

Making text italic, no matter what element has been used, can be done with the CSS font-style property. This property at least accepts a few values – but the one we care about in this CSS tutorial, is called italic – you can change your font to italic using the below styling:

div {
 font-style: italic;

You can also change the font-style of the em tag, so that it doesn't make text italic when used – you can then assign any CSS style that you want later – removing italics from em or i is done like it has been demonstrated in the below example:

em {
 font-style: normal;

CSS Bold Italic

If you want your text or font to be both bold and italicized, then you shouldn't surround it in both em and strong – instead you should just add a class to the strong element, and then apply the CSS style to that.

.ithisto {
 font-style: italic;
 font-weight: bold;

Classes can be re-used throughout your entire page source, while ids should only be used once in each page.

As you can see, making elements italic in CSS, is often far better than doing it with markup alone. The best you can do, is to use a good mix of HTML italic – that would be em or i – and CSS italic.

More CSS Tutorials

  1. Make text bold with CSS
  2. How to change font color with CSS