menu
font-style is the CSS property that sets the font style of a text, whether they should remain normal, or become italic or oblique - depending on the font family availability.
taught by Tina May
Normal is the default font style that will apply if you haven’t set anything else.
font-style:
Tip: Normal font style is also referred to as “Roman”
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can set the text to be italic (kind of like cursive). If there’s no italic version, the browser will artificially make the text italic.
font-style:
Tip: - When the browser makes the text artificially italic, more often that not it will look pretty ugly so check first if the italic version of your font is available.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can make the text oblique (slanted or skewed to the right) depending on the font family availability.
font-style:
Tip: - While italic typefaces come with distinct letter shapes, oblique typefaces are simply skewed versions of regular fonts. If there is no oblique version, it will default to the italic version.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change the heading's font style*/
h2 { font-style: italic; }
/* Change the paragraph's font style*/
p { font-style: normal; }
Try changing the font style of our heading and paragraph below, and give it emphasis by making it italic or oblique. Here we’ve included Open Sans font family from Google for you to play with.
Try these:
Copyright 2023