The font-style property controls whether text appears upright, italic, or oblique — a simple way to add emphasis and visual variety.
Upright text.
Designed slant.
Slanted regular.
Highlight words.
Blockquotes.
Image labels.
The font-style property in CSS is used to specify the style of the font for an element. This property allows you to make text italic, oblique, or normal, providing a way to emphasize or differentiate text content within your web pages.
It's a fundamental property for styling text in web design. You will see it on quotes, captions, emphasized phrases, and anywhere you want text to stand apart from surrounding copy.
Apply font-style: italic when you want the dedicated italic design from a font family. Use oblique when you need a slanted look and the font may not include a separate italic face. Reset styling with normal to return text to upright form.
The browser default for <em> and <i> is often italic. You can override that with font-style: normal if you use those elements for other reasons.
The syntax for the font-style property is simple and can be applied to any text element:
element {
font-style: value;
}Here, value can be one of the predefined keywords: normal, italic, or oblique.
.quote {
font-style: italic;
}The default value of the font-style property is normal. If no font-style is specified, the text appears in its normal, upright form.
normal, italic, and oblique.oblique with an angle, such as oblique 15deg, on supporting browsers.font shorthand when included in the declaration.| Question | Answer |
|---|---|
| Initial value | normal |
| Applies to | All elements |
| Inherited | Yes |
| Common emphasis value | italic |
| Reset italic styling | font-style: normal; |
| Value | Description |
|---|---|
normal | The text is shown in a normal, upright font style |
italic | The text is shown in an italic font style using the font's italic face when available |
oblique | The text is shown in an oblique font style, which is a slanted version of the normal font |
| Style | How it works | Best for |
|---|---|---|
italic | Uses a separately designed italic typeface | Quotes, emphasis, elegant typography |
oblique | Slants the regular font (or uses an oblique face) | Quick slant when italic face is missing |
The same sentence with normal, italic, and oblique styles:
Apply different font styles to paragraphs — then explore blockquotes, italic vs oblique, and caption styling.
Start with the reference example — normal, italic, and oblique on separate paragraphs.
Apply the three keyword values to demonstrate each font style.
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }Each class sets a different style keyword. The browser selects the matching font face or synthesizes a slant when needed.
Style a quotation in italic to distinguish it from body text.
blockquote {
font-family: Georgia, serif;
font-style: italic;
border-left: 4px solid #cbd5e1;
padding-left: 1rem;
color: #475569;
}Italic styling signals quoted or secondary content without changing the HTML structure beyond a semantic blockquote.
See italic vs oblique side by side and style figure captions.
Compare how italic and oblique render with an identical font family and size.
.italic-text { font-style: italic; }
.oblique-text { font-style: oblique; }With a full font family, italic often looks smoother because letter shapes are redesigned. Oblique may look similar or slightly more mechanical depending on the font.
Use italic for image captions while keeping the heading upright.
figcaption {
font-size: 0.875rem;
font-style: italic;
color: #64748b;
margin-top: 0.5rem;
}Captions are supporting text. Italic plus a smaller size helps them read as metadata beneath the main content.
<em> for emphasis and <cite> for citations when appropriate.font-style WorksChoose normal, italic, or oblique.
It looks for an italic or oblique variant in the active font family.
If no matching face exists, the browser may synthesize a slanted style for oblique.
Text stands out through slanted styling while keeping the same font family and size.
The font-style property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a well-established CSS property and can be reliably used across browsers and devices.
normal, italic, and oblique work in every major browser, including legacy environments.
Bottom line: font-style is universal. Choose fonts with true italic faces for the best typography.
The font-style property is an essential tool for web developers to style text and enhance the readability and aesthetic appeal of their content. By using font-style, you can create emphasis and distinguish different sections of text in your web pages.
Experiment with the different values of this property to see how it can improve the look and feel of your text content. Pair italic styling with semantic HTML when the slant carries meaning, not just decoration.
italic for quotes and captions<em> for semantic emphasisnormal when neededfont-styleUse these points when styling slanted text.
Style control.
Purposenormal keyword.
DefaultSeparate face.
Best practiceMechanical slant.
AlternativeChildren inherit.
CascadeOpen the HTML editor, switch between normal, italic, and oblique, and see how each style changes your text.
5 people found this page helpful