In this tutorial, you will learn-
In this article, you will learn-
CSS Font Style
The CSS font style property defines whether the font has an italic, oblique, or normal font-face.
Font Style
The font-style property is generally used to specify italic text.
This property has three values:
• normal – The text is shown normally
• italic – The text is displayed in italics
• oblique – The text is “leaning” (oblique is basically the same as italic, but less supported)
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Font Weight
The font-weight property specifies the weight of a font:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Font Variant
The font-variant property specifies whether or not a text ought to be shown in a small-caps font.
In a small-caps font, all lowercase letters are changed to uppercase letters. Nonetheless, the changed uppercase letters shows up in a smaller font size than the original uppercase letters in the text.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Welcome to CSS Tutorial.</p>
<p class="small">Learn CSS.</p>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
