The correct way to set texts in italics using CSS
In this article we will learn how the correct way to set texts in italics using CSS, fully natively and also following good web development practices
Hey you programmer, are you okay?
Watch this content on YouTube:
There are three main ways to italicize text with HTML/CSS, they are:
- tag <em>;
- tag <i>;
- font-style;
Each one has its purpose and meaning, so it’s good to stay tuned and make good use of these resources. Let’s see them in detail now!
Tag <em>
It should be used for semantic purposes, not just for styling text, for adding style use font-style
When you use the <em> tag you want to emphasize a text
For example:
<p>Todos deveriam estudar <em>HTML e CSS</em> antes de criar páginas web</p>
Tag <i>
Similar to the <em> tag, it should not be used just to style the text between the <i> tag.
Its use is also semantic
And the big difference between the <em> and <i> tag is its purpose
You must use the <em> tag to emphasize a text, as mentioned earlier
The <i> tag is used for words from other languages, technical terms or even fictional characters’ thoughts, for example:
<p>Maçã em inglês se escreve <i>apple</i></p>
The font-style property:
Now, when we want to make the text in italics just for layout/design reasons, we use this CSS rule
The font-style rule must be used with the value italic, like this:
p {
font-style: italic;
}
Let’s imagine we are adding a style to a <p>, you should just adjust the element to the one of your choice/need
We learned all the ways to italicize HTML/CSS texts, or at least the most used ones
Conclusion
In this article we learned how we transform texts in italics using CSS, and also the importance of respecting semantics
Recap:
- <em>: for text emphases;
- <i>: for texts in other languages, technical terms, thoughts of fictional characters;
- font-style: to style text without semantics;
And that’s it for today, see you on the next post! 🙂
Want to learn more about HTML and CSS? Click here!
