font-style

font-style selects a normal, italic, or oblique face within a family. Italic and oblique can be separate designed faces; either may be synthesized when the appropriate face is unavailable.

Compare normal, italic, and oblique

The font may render italic and oblique similarly. That is a result of face availability and matching, not proof that the values mean the same thing.

<p>Normal text</p>
<p class="italic">Italic text</p>
<p class="oblique">Oblique text</p>

p {
  font-family: Georgia, serif;
  font-size: 1.25rem;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

Style a work title while keeping its meaning

Cite marks the title of a work. Its italic appearance is a separate CSS choice. The quote remains an actual blockquote and the person’s name is outside cite.

<figure>
  <blockquote><p>Change one thing, then compare.</p></blockquote>
  <figcaption>
    An example quotation from <cite>Practice Notes</cite>, by a fictional
    workshop author.
  </figcaption>
</figure>

blockquote {
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid #2563eb;
}
cite {
  font-style: italic;
}
p {
  line-height: 1.5;
}

Values and inheritance

The initial value is normal and font-style is inherited. Italic selects an italic face, with fallback matching if necessary. Oblique selects an oblique face; it can include an angle such as oblique 10deg. The default angle is 14deg, but exact matching depends on the font and browser.

Angle support and variable-font slant axes need separate compatibility checks. Do not present newer directional values as ordinary interoperable syntax. A later font shorthand can reset an earlier style.

Semantics and readability

CSS italic styling does not add stress emphasis. Use em when stress changes the meaning and i for appropriate idiomatic or alternate-voice text. Keep long passages readable; setting every paragraph italic can make reading harder.

Learn font-family and font for face selection and shorthand resets.

Sources and browser support

MDN: font-style describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.