🎨 What is CSS font-style?

The font-style property is used to define the appearance and posture of text in CSS. It determines whether text is displayed normally, italicized, or slanted.

This property is commonly used to emphasize text, highlight quotations, style names, and create visual distinction between different types of content.

p {
    font-style: italic;
}
                

📌 This makes all paragraph text appear in an italic style.

Displays text in its default upright style without any slant.

h1 {
    font-style: normal;
}
                

• Default text appearance
• Most commonly used value

Displays text using the font's actual italic design, creating a more elegant and emphasized appearance.

p {
    font-style: italic;
}
                

📌 Commonly used for quotes, book titles, foreign words, and emphasized content.

Displays text with an artificial slant. It looks similar to italic but is generated by skewing the normal font.

p {
    font-style: oblique;
}
                

• Creates a slanted appearance
• Not a true italic font style

These values are useful when resetting styles or inheriting font styles from parent elements.

p {
    font-style: inherit;
}
                

• initial → Resets to browser default.
• inherit → Uses the parent element value.

h1 {
    font-style: normal;
}

em {
    font-style: italic;
}

p.note {
    font-style: oblique;
}