🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS font-style

Control the slant of your text. Learn to master italic, oblique, and normal states.

style.css
.text {
font-family: serif;
font-style: italic;
}
/* Result: */
This text is slanted.
🖌️
font-style.css
1 / 8
🎨

Tutor:The CSS font-style property is used to specify whether text should appear italicized. It is a fundamental property for typography.


Style Mastery Tree

Unlock nodes by mastering font styles.

Concept 1: The font-style Property

The font-style property specifies if the text should be italicized. The most common use is setting it to italic.

System Check

Which CSS property is used to make text italic?

Community Styles

Share Typography Tips

Have you found a great font pairing? Share your CSS.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Font Style Property

Author

Pascual Vila

Frontend Instructor.

The font-style CSS property allows you to define the style of the font face, primarily used to turn text italic.

Values

The main values you will use are:

  • normal: The text is shown in the standard upright style.
  • italic: The text is shown using the font's italic script.
  • oblique: The text is shown using a slanted version of the normal face.

Italic vs Oblique

Italic forms are generally cursive in nature, designed specifically by the type designer.Oblique faces are typically just sloped versions of the regular face. If no italic version exists, browsers may simulate it using an oblique strategy.

Font Style Glossary

font-style
CSS property that specifies whether a font should be styled with a normal, italic, or oblique face.
italic
A value that selects the designer's italic typeface, often with cursive qualities.
oblique
A value that selects a slanted version of the normal typeface.
normal
Resets the font style to the default upright presentation.