Aria has just gotten back from the vets and is feeling a little under the weather. She has had some injections which are making her a bit wobbly on her feet.
How are you feeling, Aria?
Like I need a nap. Even more so than normal.
Are you ok, Aria?
She is leaning slightly to the side as she stands, which reminds me of a certain CSS property.
There are lots of CSS properties you can use to customise the text on your website; one of which is ‘font-style’. With ‘font-style’ you can choose to add text in italics, which looks like this:
Like normal text but leaning a bit. Like Aria after the vets.
To set your font style with CSS, use the ‘font-style’ CSS property, like this:
font-style:
Then add the value you want to set the font style property to. Here are some examples:
By default, ‘font-style’ is set to normal and so most text you see, like this, is upright and styled normally. If you want to specify your font style as normal use the code below.
font-style: normal;
With ‘font-style’ set to normal your text will look like this:
Aria on a normal day.
Italic text appears as if it is leaning slightly, like Aria does right now. To show text in italics, use the ‘italic’ value with your ‘font-style’ CSS property, like this:
font-style: italic;
The result will look like this:
Aria after her injections.
Italics are used to draw attention to specific words or specific paragraphs. They can also be used to illustrate that a phrase is a quote.
Another option is to set your ‘font-style’ CSS property to ‘oblique’ using this code:
font-style: oblique;
However this results in text almost indistinguishable from text styled in italics and so isn’t used as frequently.
Or is it used frequently and you just think it italics?
That is a good point!
Even in this state, I can outsmart you!
Aria?
Yes?
You’re standing in your water bowl.
Here is what text styled with ‘oblique’ looks like. For comparison there is some italic text immediately after.
Font style is oblique.
Font style is italic.
Try out each example with the code editor below:
font-style:;
Aria after the vets.
Do you notice what happens if you use an invalid value? Like when you are typing a new value but haven’t finished typing it yet?
As the default is ‘normal’ any time where the value for the font style property isn’t right, the browser will style your text normally.
So if you make a mistake in your CSS, your text will be normal and upright, unlike Aria, who is asleep.
Having a well deserved rest.