Font style in CSS - Browser Rendering Trace

Render Flow - Font style

Parse CSS file

↓

Find font-style property

↓

Match selector to element

↓

Apply font-style value

↓

Recalculate text layout

↓

Paint text with new style

↓

Composite layers

The browser reads the CSS, finds the font-style property, applies it to the matching text elements, recalculates how the text looks, then paints and displays the styled text.

Render Steps - 3 Steps

Code Added:p { font-style: normal; }

Before

[Paragraph 1]
This is normal text.

[Paragraph 2]
This is italic text.

[Paragraph 3]
This is oblique text.

→

After

[Paragraph 1]
This is normal text.

[Paragraph 2]
This is italic text.

[Paragraph 3]
This is oblique text.

All paragraphs use the default normal font style, so text appears upright with no slant.

🔧 Browser Action:Apply default font style to all paragraphs; no visual change from default.

Code Sample

Three paragraphs showing normal, italic, and oblique font styles respectively.

CSS

<p>This is normal text.</p>
<p class="italic">This is italic text.</p>
<p class="oblique">This is oblique text.</p>

CSS

p {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Render Quiz - 3 Questions

After applying step 2, how does the second paragraph text appear?

A Slanted to the right with a cursive style

B Upright with no slant

C Bold and underlined

D Slanted to the left

Common Confusions - 2 Topics

Why does 'oblique' look almost the same as 'italic'?

Oblique is a slanted version of the normal font, often created by skewing. Italic uses a specially designed font style with cursive shapes, so it looks more stylized.

💡 Italic is a special font style; oblique is a slanted normal font.

Why doesn't font-style change anything on some fonts?

Some fonts do not have italic or oblique versions, so the browser may simulate oblique or show no difference.

💡 Use fonts with italic styles for clear changes.

Property Reference

Property	Value	Visual Effect	Common Use
font-style	normal	Text is upright with no slant	Default text style
font-style	italic	Text slants to the right with a cursive style	Emphasizing text or quotes
font-style	oblique	Text slants to the right but less stylized than italic	Subtle emphasis when italic font is unavailable

Concept Snapshot

font-style controls text slant: normal (upright), italic (stylized slant), oblique (simple slant). Italic uses special fonts; oblique skews normal fonts. Default is normal. Use italic for emphasis or quotes. Oblique is fallback if italic unavailable.