Currently Empty: ₹0.00
CSS Font Style
CSS CODES & EXAMPLES
CSS Font Style
Learn how to change the style of text using CSS with
font-style, including normal, italic and oblique text.
01
What is font-style?
Control the appearance of text
The CSS font-style property specifies whether text
should appear in a normal, italic, or oblique style.
Syntax:
font-style: value;
02
Normal Font Style
Default text style
The normal value displays text in its regular style.
normal.css
p {
font-style: normal;
}This is normal text.
03
Italic Font Style
Slanted text using italic
The italic value displays text using the italic
version of the selected font when available.
italic.css
p {
font-style: italic;
}This is italic text.
04
Oblique Font Style
Slanted text
The oblique value displays a slanted version of the
font. Unlike italic, it can use a mechanically slanted version
of the normal font.
oblique.css
p {
font-style: oblique;
}This is oblique text.
05
Compare Font Styles
Normal vs italic vs oblique
normal
Learn Computer Skills
italic
Learn Computer Skills
oblique
Learn Computer Skills
06
Font Style with Headings
Style different HTML elements
heading-style.css
h1 {
font-style: italic;
}
h2 {
font-style: oblique;
}
p {
font-style: normal;
}Italic Heading
Oblique Subheading
Normal paragraph text.
07
Font Style with Classes
Reusable CSS styles
classes.css
.normal-text {
font-style: normal;
}
.italic-text {
font-style: italic;
}
.oblique-text {
font-style: oblique;
}Normal text class
Italic text class
Oblique text class
08
Italic Text for Important Information
Practical website exampleIMPORTANT NOTE
Practice regularly to improve your skills.
Complete each lesson and experiment with the examples yourself.
info-card.css
.note p {
font-style: italic;
}
09
Font Style with Font Family
Combine multiple typography properties
font-combination.css
p {
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
}Beautiful typography improves the reading experience.
10
Font Style with Font Weight
Combine italic and bold text
bold-italic.css
strong {
font-style: italic;
font-weight: 700;
}
Bold and italic text together.
11
Font Style on Hover
Interactive CSS effect
hover.css
.hover-text:hover {
font-style: italic;
}Move your mouse over this text.
12
Font Style with Buttons
Simple UI example
13
Font Style with CSS Variable
Reusable design system
variable.css
:root {
--text-style: italic;
}
.note {
font-style: var(--text-style);
}
14
When Should You Use Italic?
Practical typography guidance
💬 Quotes
Italic text can visually distinguish quotations from normal content.
📝 Notes
Use italic styling for supporting or secondary information.
📖 Definitions
Important terms can sometimes be emphasized with italic styling.
🎓 Learning Content
Italic text can help highlight examples or additional explanations.
15
Quick Reference
Important CSS valuesnormal
Regular text style.italic
Uses the italic form of the font when available.oblique
Displays a slanted version of the font.
16
Practice Task
Test your CSS skills🎯 Your Challenge
Create a small educational notice box using CSS.
- Make the heading normal.
- Make the supporting paragraph italic.
- Make a warning message oblique.
- Combine
font-stylewithfont-weight. - Add a hover effect to one text element.
17
CSS Font Style Live Runner
Experiment with font-style values
LIVE PREVIEW