CSS font-style Property
A font-style CSS property is used to style the given particular text in a normal, italic, or oblique face from its font-family. Using the font-style property, we can assign importance along with decorating the specific text. It helps to make a better user experience. In CSS, if we want to give designing to any type of text then we can make the use of CSS font-style property.
Syntax:
font-style: normal|italic|oblique|initial|inherit;
Property values:
- normal: This is the default value of the font-style for which the browser will display normal font text.
- italic: This font-style is used to display the text as italic in the browser.
- oblique: This font-style specifies an angle for the slant of the text. The displayed font-style is oblique in the browser.
- initial: This font-style property is used to set the font to its default value.
- inherit: This font-style property is used to inherit the current property from its parent element.
We will discuss all the font-style properties through the examples. Let’s begin with the normal font-style property.
- font-style: normal: Browser will display normal font text it is the default value.
Syntax:
font-style: normal;
Example: This example illustrates the font-style whose value is set to normal.
HTML
<!DOCTYPE html><html><head> <title> CSS | font-style Property </title> <style> p.a { font-style: normal; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>Normal font-style Property</h3> <p class="a">GeeksforGeeks</p></body></html> |
Output:
font-style: italic: This is used for making font in italic.
Syntax:
font-style: italic;
Example: This example illustrates the font-style whose value is set to italic.
HTML
<!DOCTYPE html><html><head> <title> CSS | font-style Property </title> <style> p.a { font-style: italic; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>Italic font-style Property</h3> <p class="a">GeeksforGeeks</p></body></html> |
Output:
font-style:oblique: The browser displays an oblique font style.
Syntax:
font-style: oblique;
Example: This example illustrates the font-style whose value is set to oblique.
HTML
<!DOCTYPE html><html><head> <title> CSS | font-style Property </title> <style> p.a { font-style: oblique; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>Oblique font-style Property</h3> <p class="a">GeeksforGeeks</p></body></html> |
Output:
font-style:initial: The browser displays an initial font style which is the default.
Syntax:
font-style: initial;
Example: This example illustrates the font-style whose value is set to initial.
HTML
<!DOCTYPE html><html><head> <title> CSS | font-style Property </title> <style> p.a { font-style: initial; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>Initial font-style Property</h3> <p class="a">GeeksforGeeks</p></body></html> |
Output:
font-style:Inherit: This inherits property from its parent element.
Example: In this example, we have set the value of color as inherit that will be inheriting the color property from its parent element.
HTML
<!DOCTYPE html><html><head> <title> CSS | font-style Property </title> <style> span { color: blue; font-size: 70px; } .extra span { color: inherit; } </style></head><body> <div> <span>GeeksforGeeks</span> </div> <div class="extra" style="color:green"> <span>GeeksforGeeks</span> </div> <div style="color:red"> <span>GeeksforGeeks</span> </div></body></html> |
Output:
Supported Browsers: The browser supported by font-style Property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Please Login to comment...