In Cascading Style Sheets (CSS), there are various aspects involved in styling a font, such as setting a font style and size. The font-style property ensures the text stands out and enriches the sheet with a visual hierarchy and possesses great importance.
The CSS font-style property is utilized for styling fonts in italic, normal, and oblique formats. Using the font-style property, we can also customize the style of the text and make it attractive.
In this article, we will learn about the CSS font-style properties with the help of suitable examples.
CSS font-style property values
In CSS, the font-style property comprises these three values:
We will briefly discuss each of the specified CSS font-style properties in the next sections.
How to italicize a font in HTML
In typography, italic font is used to write text in a cursive font style. The CSS italic font-style property slants the text element from left to right. These types of elements usually take less horizontal space than unstyled elements.
You can also set the “italic bold” font style at once by using the following syntax.
Example: CSS Italic font-style property
In the following example, we have defined two font styles for the paragraphs elements: “p.x” and “p.y”. The “p.x” font style will italicize the specific paragraph text, whereas the “p.y” font style applies both the “italic” and “bold” font-style property values to the text element:
As you can see from the output, the font-style property of the first paragraph’s text is only set to italicize, while the text of the second paragraph is bold and italicized:
How to Oblique a font in HTML
CSS Oblique font-style property is used to write cursive text; however, it differs from the italic font style in a way that it utilizes degrees to slant the text. Also, the text is slightly slanted from left to right in oblique font style.
All browsers do not support oblique font style, but if you want to use it, then artificially stimulate it in the normal font style.
Syntax of CSS Oblique font-style property
Here, “angle” sets the angle of slanting text, and this feature distinguishes oblique from the italic font-style property.
Note: CSS Oblique font-style property uses a 14-degree angle by default, and its valid degree values lie between -90 degrees to 90 degrees.
Example: CSS Italic font-style property
In the following example, we will set the angle of “oblique” font-style property as “10deg”:
Save the added code and open the HTML file in the browser. Upon doing so, you will see that oblique font style is applied to the paragraph text at 10 degrees angle:
How to Normalize a font in HTML
The default font style is set as “normal” in CSS. Now, you may question why we use the normal font-style property if it is already set as the default font-style value?
The normal CSS font-style property is utilized to normalize the font back to its original state if changed using italic or oblique values.
Check out the following example to understand the stated concept.
Example: CSS normal font-style property
In the below-given example, the font is first italicized using font-style property:
Now, to revert the font back to normal, the normal value of font-style property will be used:
The output signifies that we have successfully set the font style to Normal:
That was all essential information related to CSS font-style property. You can further explore it on your own.
Conclusion
CSS font-style property specifies the font style of the text elements. It is used to style text in normal, italic, bold, and oblique formats. By utilizing different CSS font-style properties, we can customize the style of a text and can make it visually appealing. This write-up discussed CSS font-style property with the help of suitable examples.
