🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to CSS Notes
Topic #49

Font Style


CSS Font Style

The CSS font-style property specifies the font style for a text..

This property can have one of the following values:

  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic)

Example

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

CSS Font Weight

The CSS font-weight property specifies how thick or thin characters in text should be displayed.

This property can have one of the following values:

  • normal - This is default. Defines normal characters
  • bold - Defines thick characters
  • bolder - Defines thicker characters
  • lighter - Defines lighter characters
  • 100-900 - Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold

Example

  p.normal {
  font-weight: normal;
}

p.light {

  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

CSS Font Variant

The CSS font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Example

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Want to go beyond the notes?

Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

Font Style – FAQs

Quick answers about learning Font Style in CSS.

This free note from CodingNow 2.0 explains Font Style in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on CodingNow 2.0, including Font Style, is 100% free with no signup required.
With focused practice, most students grasp Font Style in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now